如何更新代表相同数据的两个不同的 React 组件实例？

Question

假设我定义了一个 <Tag> 组件，它有两个 props：id 和 name。我的应用程序在两个不同的地方呈现这个组件，所以我有一个 <Tag> 组件，其 id 为 1 出现两次，但其所有者不同。一个标签由<Entries> 组件拥有，另一个由<Tags> 组件拥有。

当单击<Tag> 时，我想更改其状态，并且我希望具有相同id 的所有其他<Tag> 组件也更改其状态以使其匹配。最好的方法是什么？所有<Tags> 都应该具有相同的根组件吗？我不喜欢这个主意，因为我觉得这是一个脆弱的解决方案。

Answer 1

id 通常在 html 文档中应该是唯一的。 最好的解决方案是将您的 id 更改为 classes。

Answer 2

我认为你有两个选择：

1- 反应方式

• 您应该将状态保存在<Tags> 和<Entries> 的共同所有者组件中。
• 您应该将更改处理程序从状态所有者组件传递到 <Tag> 组件

• 当标签更改时，状态所有者将更新<Tags> 和<Entries> 中的<Tag>s

• 阅读本文应该会给您很多见解： http://facebook.github.io/react/docs/thinking-in-react.html

2- 纯通量方式

• 如果您的应用程序比您所说的复杂一点，您可以使用通量架构。
• 为此，您应该在应用程序中实现操作、调度程序和存储。

• 当 <Tag> 发生更改时，您调用一个操作，该操作又调用一个调度程序，该调度程序又由存储区侦听，该存储区又向组件发出更改事件。然后所有组件都使用新状态更新自己。

• 您可以在此处找到有关通量的信息： http://facebook.github.io/flux/docs/overview.html