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

Question

我有2个需要共享状态的React组件，react-
router显示了组件A，该组件接受一些输入并将其添加到其状态，在状态成功更新后，我想重定向到组件B，用户在其中添加在我向我的api提交发布请求以保存来自组件A和B的数据之前，使用一些更多的输入并更新与组件A相同的状态以使用来自A和B的输入来构建对象。如何做到这一点，使用react-
router的方式，还是我必须在组件之间设置父/子关系？

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作为练习留给读者。

请注意，您始终可以将store（myStore）本身传递给组件；这样做反而会减少反应。

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

React Docs：“组件之间通信”

要在没有父子关系的两个组件之间进行通信，可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅componentWillUnmount（）中的事件，并在收到事件时调用setState（）。助焊剂模式是解决此问题的一种可能方法。