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

我有2个需要共享状态的反应组件,react-router显示组件A,它接受一些输入并将其添加到其状态,在状态成功更新后,我想重定向到组件B,用户添加一些更多的输入和更新与组件A相同的状态,以便在我向api提交post请求之前使用A和B的输入构建一个对象,以保存来自组件A和B的数据.如何实现这一点,是否有使用react-router的方法,还是我必须在组件之间建立父/子关系?
最佳答案
你想要的是实现一些存储你的状态的对象,可以使用回调函数进行修改.然后,您可以将这些函数传递给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 Docs: “Communicate Between Components”

For communication between two components that don’t have a
parent-child relationship, you can set up your own global event
system. Subscribe to events in componentDidMount(), unsubscribe in
componentWillUnmount(), and call setState() when you receive an event.
Flux pattern is one of the possible ways to arrange this.

转载注明原文:javascript – 如何在两个反应组件之间建立共享状态? - 代码日志