Question

我在React组件中有数组（JS）数据。我想在该数组上使用循环生成动态div。

一个是可以使用jquery / javascript

完成

componentDidMount(){
    var headingsArray = //contains some data from backend;

    for (var i = 0; i < headingsArray.length; i++) {
        var maprow = '';
        maprow += "<div>"+ headingsArray[i] +"</div>";
       //Some More Data In maprow
       $('.parentDiv').append(maprow);
    }
}

render(){
   return(
       <div className="parentDiv"></div>
   )
}

做出反应的方式是什么？因为我是新手做出反应

Answer 1

使用array.map：

render() {
  const headingsArray = [] // data from your backend

  return (
    <div className="parentDiv">
      {headingsArray.map((heading, index) => <div key={index}>{heading}</div>)}
    </div>
  )
}

在映射数组时，

key是一个非常重要的道具。有了这个，反应知道哪些元素已被添加，更改或删除。

如果您对array.map有任何疑问，请查看this链接。

在reactjs中使用js数组创建动态元素

1 个答案: