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

Question

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

1. 新组件应添加到先前组件的下方
2. 先前添加的组件包含添加的数据，并且在添加新组件时不应刷新。

我尝试搜索，但是所有解决方案均建议使用“列表”，并增加每次点击的计数。

这是我的需求图：

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

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

https://jsfiddle.net/np7u6L1w/

constructor(props) {
super(props)
this.state = { addComp: [] }
}
addComp() { // Onclick function for 'Add Component' Button
//this.setState({ addComp: !this.state.addComp })
this.setState({
    addComp: [...this.state.addComp, <Stencil />]
});
}

render() {
return (
  <div>
    <div class="contentLeft"><h2>Workflows:</h2>
    <Stencil />
    {this.state.addComp.map((data, index) => {
            { data }        
    })}
    </div>
    <div class="contentRight" >
      <button name="button" onClick={this.addComp.bind(this)} title="Append new component on to the end of the list">Add Component</button>
    </div>
    <div class="clear"></div>
  </div>
)
}

Answer 1

代码已更新： 您可以做类似的事情

// 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() 
}

Answer 2

也许当添加新的孩子时，您希望动画起作用。

这是最好的方法 react-transition-group

示例：https://reactcommunity.org/react-transition-group/transition-group