Javascript React.js-添加div'；它在飞

所以我在React上忙得不可开交，我似乎无法解决这个简单的问题（可能是因为睡眠不足）

当我单击“添加行”时，我想在

渲染中动态添加元素（或div）

我该怎么办呢？我是否需要将它保存在一个数组中，并且在渲染函数中，我必须映射它

class SimpleExample extends React.Component {
    constructor(props) {
        super(props)
        this.handleAddingDivs = this.handleAddingDivs.bind(this)
    }


    handleAddingDivs() {
        const uniqueID = Date.now()
        return (
            <div>
                This is added div! uniqueID: {uniqueID}
            </div>
        )
    }

    render() {
        return (
            <div>
                <h1>These are added divs </h1>

                <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>
            </div>
        )
    }
}

类SimpleExample扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleAddingDivs=this.handleAddingDivs.bind（this）
}
手动引导divs（）{
const uniqueID=Date.now（）
返回(
这是添加的div！uniqueID:{uniqueID}
)
}
render（）{
返回(
这些是添加的div
{'addrow'}
)
}
}
假设您想要添加多个div，那么请为其维护一个状态变量、count或任何其他数据（您也可以使用任何
数组
并存储所有div的唯一值），然后使用map或任何其他循环为其创建div

检查此工作代码段：


类SimpleExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={count:0}
this.handleAddingDivs=this.handleAddingDivs.bind（this）
}
手动引导divs（）{
this.setState（{count:this.state.count+1}）
}
renderDivs（）{
让count=this.state.count，uiItems=[]；
而（计数--）
uiItems.push(
这是添加的div！uniqueID:{count}
)
归还物品；
}
render（）{
返回(
这些是添加的div
{'addrow'}
{this.renderDivs（）}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
假设您想要添加多个div，那么请为其维护一个状态变量、count或任何其他数据（您也可以使用任何
数组
并存储所有div的唯一值），然后使用map或任何其他循环为其创建div

检查此工作代码段：


类SimpleExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={count:0}
this.handleAddingDivs=this.handleAddingDivs.bind（this）
}
手动引导divs（）{
this.setState（{count:this.state.count+1}）
}
renderDivs（）{
让count=this.state.count，uiItems=[]；
而（计数--）
uiItems.push(
这是添加的div！uniqueID:{count}
)
归还物品；
}
render（）{
返回(
这些是添加的div
{'addrow'}
{this.renderDivs（）}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
尝试下面的代码。无论何时单击该按钮，都会生成一个唯一的id并存储在
state.uids
中。在
render（）
中，根据
state.uid
呈现添加的div


类SimpleExample扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleAddingDivs=this.handleAddingDivs.bind（this）
this.state={uids:[]}
}
手动引导divs（）{
让curr=this.state.uids；
const uniqueID=Date.now（）
this.setState（{uids:[…curr，uniqueID]}）；
}
render（）{
返回(
这些是添加的div
{'addrow'}
{this.state.uids.map（（uid，idx）=>
这是添加的div！uniqueID:{uid}
)}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
尝试下面的代码。无论何时单击该按钮，都会生成一个唯一的id并存储在
state.uids
中。在
render（）
中，根据
state.uid
呈现添加的div


类SimpleExample扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleAddingDivs=this.handleAddingDivs.bind（this）
this.state={uids:[]}
}
手动引导divs（）{
让curr=this.state.uids；
const uniqueID=Date.now（）
this.setState（{uids:[…curr，uniqueID]}）；
}
render（）{
返回(
这些是添加的div
{'addrow'}
{this.state.uids.map（（uid，idx）=>
这是添加的div！uniqueID:{uid}
)}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
是的，您需要将有关新div的数据存储在某处

这就是flux/redux有时的用途：将需要渲染的所有数据存储在
store
中，然后知道要渲染什么

但是如果你不使用这个，只使用React，那么使用state！
在你的情况下，你的州应该是这样的：

{
  addedDivs: [
    {uniqueId: 123},
    {uniqueId: 754},
  ]
}

然后在渲染中，您将映射它（不要忘记添加
键
）

是的，您需要在某处存储有关新div的数据

这就是flux/redux有时的用途：将需要渲染的所有数据存储在
store
中，然后知道要渲染什么

但是如果你不使用这个，只使用React，那么使用state！
在你的情况下，你的州应该是这样的：

{
  addedDivs: [
    {uniqueId: 123},
    {uniqueId: 754},
  ]
}

然后在渲染中，您将映射它（不要忘记添加
键
）

您正在考虑DOM操作/jQuery的术语。使用React时，需要考虑数据，以及数据与DOM的关系

在您的情况下，您需要：


每次单击
handleAddi中的“添加行”按钮时，使用新行更新组件状态
this.setState((prevState, props) => {
  var addedDivs = prevState.addedDivs;
  var uniqueId = Date.now();
  addedDivs.push({uniqueId: uniqueId});
  return {addedDivs: addedDivs}
});

class SimpleExample extends React.Component {
  constructor(props) {
    super(props)
    this.handleAddingDivs = this.handleAddingDivs.bind(this)
   }

  //Modify state of component when 'Add Row' button is clicked
  handleAddingDivs() {
    const uniqueID = Date.now();
    this.setState({rows: this.state.rows.concat(uniqueId)});
  }

  //The `render()` function will be executed everytime state changes
  render() {
    return (
      <div>
        <h1>These are added divs </h1>
        //The rows are rendered based on the state
        {this.state.rows.map(function(uniqueId) {
          return ( 
            <div key={item.uniqueId}>This is added div! uniqueID: {uniqueID}</div>
          )
        }}
        <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>                  
      </div>
    )
  }
}