Question

我是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})
}

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

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

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

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

Answer 1

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

因此定义按钮组件，其各种状态由您将其传递的道具定义。然后，您将获得一个可变的模板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 ...}

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