Javascript ReactJs-每次在onClick期间添加唯一组件

我正在学习React和Redux。目前我正在做一个项目，我需要在点击按钮时附加一个组件

新组件应添加到上一个组件上

以前添加的组件包含添加的数据，在添加新组件时不应刷新该数据 我尝试过搜索，但所有的解决方案都建议使用列表并增加每次点击的次数

这是我的需求图：

更新： 我已经添加了我在下面的JS Fiddle中尝试过的代码

在附加新组件时，应保留在现有组件中修改的数据

构造函数（道具）{
超级（道具）
this.state={addComp:[]}
}
addComp（）{//Onclick函数用于“添加组件”按钮
//this.setState（{addComp:！this.state.addComp}）
这是我的国家({
addComp:[…this.state.addComp，]
});
}
render（）{
返回(
工作流程：
{this.state.addComp.map（（数据，索引）=>{
{data}
})}
添加组件
)
}

代码已更新： 你可以这样做

// New state
this.state = {
   appendedCompsCount: 0
}

// Outside render()
handleClick = () => {
  this.setState({
    appendedCompsCount: this.state.appendedCompsCount + 1
  }) 
}

getAppendedComponents = () => {
  let appendedComponents = [];
  for (let i = 0; i < this.state.appendedCompsCount; i++) {
     appendedComponents.push(
       <AppendedComponents key={i} />
     )
  }
  return appendedComponents;
}

// In render()
<button onClick={this.handleClick}>Click here</button>
{
   this.getAppendedComponents() 
}

//新状态
此.state={
附件：0
}
//外部渲染（）
handleClick=（）=>{
这是我的国家({
appendedCompsCount:this.state.appendedCompsCount+1
}) 
}
getAppendedComponents=（）=>{
设appendedComponents=[]；
for（设i=0；i

当添加新的子对象时，您可能希望动画正常工作

这是反应过渡组的最佳方法

---

示例：

尝试一下，然后当遇到问题时，可以将其发布以获得帮助。使用状态将组件详细信息和数据存储为数组。在render（）中。循环阵列和渲染组件。更新状态单击按钮后，react将处理rest。欢迎使用SO，请添加解决方案的代码，以便社区可以帮助您解决任何问题。否决，请发布所有您尝试过的代码，以便我们更好地帮助您。我在粘贴我尝试过的代码的地方添加了js fiddle。不，我不需要动画。但我只想在每次点击按钮时向dom添加相同的组件。谢谢Sharma。但是我需要在每次点击按钮时添加组件，而不是隐藏和显示。我已经更新了代码，您可以查看。您也可以直接将“AppendedComponents”置于状态，而不是计数，这是解决此问题的另一种方法。

// New state
this.state = {
   appendedCompsCount: 0
}

// Outside render()
handleClick = () => {
  this.setState({
    appendedCompsCount: this.state.appendedCompsCount + 1
  }) 
}

getAppendedComponents = () => {
  let appendedComponents = [];
  for (let i = 0; i < this.state.appendedCompsCount; i++) {
     appendedComponents.push(
       <AppendedComponents key={i} />
     )
  }
  return appendedComponents;
}

// In render()
<button onClick={this.handleClick}>Click here</button>
{
   this.getAppendedComponents() 
}