多次调用React组件

Question

我正在尝试使用React在DOM中加载各种图像。我的想法是将数据库中的所有图像加载到同一个div中，因此我尝试使用for循环调用react组件，该组件为图像标记呈现标记，但是，当循环结束时，DOM中显示的唯一图像是最后一个图像。有没有一种方法可以使用React来实现这一点？

这是我的组件：

class CargarImagen extends React.Component {
  constructor(props) {
    super(props);
    this.state = '';
  }
  render() {
    return (
      <div className="col-sm-3">
        <img
          src={this.props.ruta}></img>
        <a href="#">{this.props.name}</a>
      </div>
    );
  }
}

这里是调用那个组件的函数（函数retornoDB它只是一个AJAX）

function clickListado() {
  retornoDB(function (data) {
    let json = JSON.parse(data);
    const domContainer = document.querySelector('#en_proceso');
    for (var key in json) {
      if (json.hasOwnProperty(key)) {
        ReactDOM.render(<CargarImagen ruta={json[key].ruta} name={json[key].nombre} />, domContainer);
      }
    }
  });
}

任何提示都将不胜感激。谢谢

Answer 1

反应状态。渲染可以处理组件数组。

function clickListado() {
    retornoDB(function (data) {
        let json = JSON.parse(data);
        const domContainer = document.querySelector('#en_proceso');

        let Images = json.map((img, index) => <CargarImagen ruta={img.ruta} name={img.nombre} key={index}/>);

        ReactDOM.render(Images, domContainer);

    });
}

Answer 2

渲染通常只是用于将应用的根注入到静态div中。你得到最后一个，仅仅是因为你一直用每个CargarImagen组件替换那个div。相反，构建一个数组并将其返回给调用（父）组件的JSX。您可以将myArray置于组件的内部状态，或者只使用一个普通对象并返回该对象。很难说你在这里是如何实现的。

for (var key in json) {
  if (json.hasOwnProperty(key)) {
    myArray.push(<CargarImagen ruta={json[key].ruta} name={json[key].nombre} />);
  }
}