Reactjs 重复使用反应组分

我一直在学习React课程，但有一件事我从来没有见过，那就是重用组件。例如，如果我有一个按钮，并且希望在每次单击该按钮时生成一个div。我该如何使用React组件来实现这一点？React组件的唯一目的是呈现单个div，而该按钮每次单击页面时都会使用该组件向页面添加其他div？

您的意思是这样的吗

CustomButton

无状态组件（presentational）只接收道具，可以禁用，可以更改文本，还可以定义回调。它没有任何自己的状态，可以在你可能需要按钮的应用程序中重复使用

按钮SampleApp

是一个容器组件，它使用Presentational组件并为其提供回调，然后处理该回调。在其渲染中添加div。

按钮SampleApp

使用组件状态来实现这一点

constCustomButton=（{text，callback，isEnabled}）=>{
return callback（）}disabled={！isEnabled}type=“button”>{text}；
};
类按钮SampleApp扩展React.Component{
构造函数（）{
超级（）；
此.state={
分区：[]
};
}
onButtonClicked（）{
const{divs}=this.state；
this.setState（{divs:[…divs，{text:divs.length}]}）；
}
render（）{
const{max}=this.props；
const{divs}=this.state；
返回(
单击按钮添加最多{max}个divs
{divs&&divs.map（{text}）=>{text}
this.onButtonClicked（）}/>
);
}
}
ReactDOM.render（，document.querySelector（'#container'）

我假设按钮是一个react组件对吗？首先，您是否在问react如何重用组件的一般问题？或者是一个具体的问题，如何让一个按钮在点击时呈现一个新的div？我并不是问它们一般是如何工作的。我知道你可以制作一个组件，然后你可以把它呈现给DOM。我想知道如何重用一个组件并创建它的新实例。比如说，我正在制作一个计分web应用程序，并希望添加新的玩家。我想使用相同的结构化div，但我希望它在每次单击addplayer时添加一个新的播放器。最好的方法是让player div在每次单击add player时映射一个播放器数组，然后让按钮只向对象数组添加信息吗？该播放器将是某种处于某种状态的数据集，然后通过渲染函数进行映射（很像我的示例中div包含文本）