重用有状态的反应组件答案

【问题标题】：reusing stateful react components重用有状态的反应组件
【发布时间】：2019-07-11 01:05:07
【问题描述】：

我是 React 新手，想要一些建议。

问题本质上如下

我有许多打开模态的组件按钮，在这个模态中我们有更多的按钮来提供选择。

主屏幕按钮（组件）

<Button value="First"></button>
<Button value="Second"></button>
<Button value="Third"></button>.....

模态。

<button value="Donald"></button>
<button value="Thomas"></button>
<button value="Evie"></button>.....

因此，例如，主屏幕按钮将具有以下功能，它将传递给模态按钮的 onClick 属性。

selectPerson(e) {
  setState({ selection : e.target.value})
}

所以通过选择“First”，我们选择一个人，关闭模态框，将选中的人与Buttons状态绑定，然后重复第二个，以此类推。

基本上这些打开模态的按钮具有相同的核心功能（状态和道具）。即我可以有一个模板组件并重用它，但我希望每个组件都有独立的状态和道具。

所以我可以实现我所需要的，但我已经将每个主屏幕按钮编写为一个独立的组件，也就是说我已经编写了很多相同的代码。如果我尝试重用 SAME 组件，则会将它们视为相同的组件，并且选择一个人会更改所有按钮的状态。

有没有办法避免为每个（我有二十个）重写相同的代码。我才刚刚开始（显然）并且对一些更高级的概念不太熟悉。如果有人有任何建议或进一步的问题，那就太好了。我没有提供代码，因为代码可以工作，它只是非常庞大

【问题讨论】：

【解决方案1】：

是的，定义按钮组件并在其道具中传递某些元素。然后，您可以将这些 setState 设置为这些传下来的道具元素等。

因此，定义一个按钮组件，其各种状态由您传递的道具定义。然后你就有了一个可变模板 Button 组件。

当您渲染这些时，您只需定义它的道具。

<Button prop = "First" prop2 = "EXAMPLE"..../>
<Button prop = "Second" prop2 = "EXAMPLE2"..../>
<Button prop = "Third" prop2 = "EXAMPLE3"..../>

然后在 Button 组件中使用类似的东西

this.state { property1 : this.props.prop, property2 : this.props.prop2 ...}

希望这会有所帮助！我最近也在做类似的事情

【讨论】：