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

How to update two different React component instances that represent the same data?

本文关键字：两个 React 实例 组件 何更新 更新 表示 数据      更新时间：2023-09-26

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

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

我认为您有两个选择：

1-反应式

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

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

  • 阅读这篇文章会让你有很多见解：http://facebook.github.io/react/docs/thinking-in-react.html

2-纯通量通道

  • 如果你的应用程序比你所说的稍微复杂一点，你可以使用通量架构
  • 要做到这一点，您应该在应用程序中实现操作、调度器和存储

  • 当<Tag>发生更改时，您调用一个操作，该操作又调用一个调度器，调度器又被存储侦听，存储又向组件发出更改事件。然后，所有组件都会使用新状态进行自我更新。

  • 你可以在这里找到通量：http://facebook.github.io/flux/docs/overview.html

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

相关文章：