如何在两个反应组件之间建立共享状态？

Question

我有 2 个需要共享状态的反应组件，反应路由器显示组件 A，它接受一些输入并将其添加到其状态，在状态成功更新后，我想重定向到用户添加的组件 B更多输入并更新与组件 A 相同的状态，以在我向我的 api 提交发布请求以保存来自组件 A 和 B 的数据之前使用来自 A 和 B 的输入构建一个对象。我如何完成此操作，是否有使用 react-router 的方法，还是我必须在组件之间建立父/子关系？

原文由 Jack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您想要的是实现一些存储状态的对象，可以使用回调函数对其进行修改。然后你可以将这些函数传递给你的 React 组件。

例如，您可以创建一个商店：

 function Store(initialState = {}) {
  this.state = initialState;
}
Store.prototype.mergeState = function(partialState) {
  Object.assign(this.state, partialState);
};

var myStore = new Store();

ReactDOM.render(
  <FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,
  firstElement
  );
ReactDOM.render(
  <SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,
  secondElement
  );

现在， FirstComponent 和 SecondComponent 实例都可以调用 this.props.mergeState({ . . .}) 将状态分配给同一个商店。

我留下 Store.prototype.getState 作为读者的练习。

请注意，您始终可以将商店（ myStore ）本身传递给组件；这样做感觉反应不那么强烈。

以下是一些您可能感兴趣的更多文档：

React 文档：“组件之间的通信”

对于没有父子关系的两个组件之间的通信，您可以设置自己的全局事件系统。在componentDidMount()中订阅事件，在componentWillUnmount()中取消订阅，收到事件后调用setState()。通量模式是一种可能的安排方式。

原文由 A. Vidor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

组件之间的依赖类型将定义最佳方法。

例如，如果你打算拥有一个中央商店，redux 是一个很好的选择。然而，其他方法也是可能的：

• 父母对孩子

  1. 道具
  2. 实例方法

• 孩子对父母

  1. 回调函数
  2. 事件冒泡

• 兄弟姐妹

  1. 父组件

• 任何对任何

  1. 观察者模式
  2. 全局变量
  3. 语境

请 在此处找到有关每种方法的更多详细信息

原文由 Custodio 发布，翻译遵循 CC BY-SA 3.0 许可协议