时间戳

首页 > 解决方案 > 重用有状态的反应组件

reactjs - 重用有状态的反应组件

问题描述

我是 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”，我们选择一个人，关闭modal，将选中的人与Buttons状态绑定，然后重复第二个，以此类推。

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

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

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

标签： reactjscomponents

解决方案

是的，当然，定义按钮组件并在其道具中传递某些元素。然后，您可以将 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 ...}

希望这可以帮助！我最近一直在做类似的事情

推荐阅读