javascript - 多次调用 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

ReactDOM.render 通常仅用于将应用程序的根注入(inject)静态 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} />);
  }
}