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

Question

说我已经定义了一个具有两个道具的<Tag>组件： id和name 。 我的应用程序在两个不同的位置渲染此组件，因此我有一个<Tag>组件，其ID为1出现了两次，但所有者不同。 一个标签由<Entries>组件拥有，另一个<Tags>由<Tags>组件拥有。

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

Answer 1

我认为您有两种选择：

1-反应方式

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

• 标签更改时，状态所有者将同时更新<Tags>和<Entries> <Tag> 。

• 阅读此书应该会给您带来很多见识： http : //facebook.github.io/react/docs/thinking-in-react.html

2-纯助焊剂方式

• 如果您的应用程序比您所说的复杂得多，则可以使用助焊剂体系结构。
• 为此，您应该在应用程序中实现操作，调度程序和存储。

• 更改<Tag>后，您将调用一个操作，该操作又调用一个调度程序，而调度程序又被商店侦听，该调度程序又向组件发出一个change事件。 然后，所有组件都将自己更新为新状态。

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

Answer 2

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