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

Question

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

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

Answer 1

我认为你有两个选择：

1-反应方式

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

• 当代码更改后，州名所有者将更新<Tag>和<Tags>

  中的<Entries>

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

2- Pure Flux方式

• 如果您的应用程序比您告诉您的应用程序稍微复杂一点，可以使用flux架构。
• 为此，您应该在应用程序中实施操作，调度程序和存储。

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

• 你可以在这里找到关于助焊剂的信息： http://facebook.github.io/flux/docs/overview.html

Answer 2

id在html文档中通常应该是唯一的。 最好的解决方案是将您的身份证改为班级。