Question

请帮我解决下一期。在组件OpportTemplate中，我将数组作为 this.props.children 传递。它看起来像：

class WhatOpport extends Component {
constructor(props) {
    super(props);
    let opportsArray = [
        {
            imgSrc : '/tasky/src/Assets/images/opportList.png',
            text : 'Создавать список дел по каждому из проектов'
        },

        {
            imgSrc : '/tasky/src/Assets/images/opportExp.png',
            text : 'Сравнивать фактические расходы с расчетными'
        },

        {
            imgSrc : '/tasky/src/Assets/images/opportTeam.png',
            text : 'Создать команды из сотрудников для общего ведения заказа'
        }
    ];
    this.state = {opports : opportsArray};
}

render() {
    return (
        <div className="whatOpportWrapper">
            <h1>Tasky предоставляет возможность</h1>
            <div className="opportInsideWrapper row">
                {
                    this.state.opports.map(function(item, i) {
                        return(
                            <OpportTemplate key={i}>{item}</OpportTemplate>
                        );
                    })
                }
            </div>
        </div>
    );
}
}

export default WhatOpport;

在标记 img 的 src 中，我传递 this.props.children.imgSrc 。图像不会像未找到的那样呈现，但在控制台中我可以看到它通过的路径。

class OpportTemplate extends Component {
render() {
    return (
        <div className="col-sm">
            <div className="imgWrapper">
                <img src={this.props.children.imgSrc} alt="img" />
            </div>

            <div className="textWrapper">
                {this.props.children.text}
            </div>
        </div>
    );
}
}

Answer 1

你是说这个意思吗？对不起，如果我没有得到你想要的东西

class OpportTemplate extends Component {

  render() {
    return (
      <div className="col-sm">
        <div className="imgWrapper">
          <img src={this.props.children.imgSrc} alt="img" />
        </div>

        <div className="textWrapper">
          {this.props.children.text}
        </div>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    let opportsArray = [
      {
        imgSrc: '../../../Assets/images/opportList.png',
        text: 'bla'
      },

      {
        imgSrc: '../../../Assets/images/opportExp.png',
        text: 'blabla'
      },

      {
        imgSrc: '../../../Assets/images/opportTeam.png',
        text: 'blablabla'
      }
    ];
    this.state = { opports: opportsArray };
  }

  render() {
    return (
      this.renderChild()
    );
  }

  renderChild() {
    return this.state.opports.map((opport) => {
      return <OpportTemplate children={opport} />
    });
  }
}

在React中渲染图像

1 个答案: