Question

我正在尝试使用React在DOM中加载各种图像。我的想法是将数据库中拥有的所有图像加载到同一个div中，因此我尝试使用for循环调用为图像标签呈现标签的react Component，但是，当循环结束时，唯一的图像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通常仅用于将应用程序的根注入静态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} />);
  }
}

Answer 2

ReactDOM.render可以处理组件数组。

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);

    });
}

多次调用React组件

2 个答案: