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

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在通过数组进行映射时，这是一个非常重要的道具。这样，React 就知道哪些元素已被添加、更改或删除。

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