如何在两个 React 组件之间创建共享状态? [英] How to make a shared state between two react components?

问题描述

我有 2 个需要共享状态的 react 组件，react-router 显示组件 A，它接受一些输入并将其添加到其状态，在成功更新状态后，我想重定向到组件 B，其中在我向我的 api 提交发布请求以保存来自组件 A 和 B 的数据之前，用户添加了更多输入并更新了与组件 A 相同的状态，以使用来自 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)}/>,第一个元素);ReactDOM.render(<SecondComponent mergeState={myStore.mergeState.bind(myStore)}/>,第二个元素);

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

我将 Store.prototype.getState 留给读者作为练习.

请注意，您始终可以将商店(myStore)本身传递给组件；这样做只是感觉不那么反应.

这里有一些您可能感兴趣的文档:

React 文档:组件间通信"><块引用>

用于两个没有亲子关系，可以设置自己的全局事件系统.在 componentDidMount() 中订阅事件，在componentWillUnmount()，并在收到事件时调用 setState().通量模式是一种可能的安排方式.

I have 2 react components that need to share a state, react-router shows component A, which takes some inputs and adds it to its state, after the state has been successfully updated, I want to redirect to component B, where the user adds some more inputs and updates the same state as component A to build an object with inputs from A and B before I submit a post request to my api to save the data from both component A and B. How can I accomplish this, is there a way to use react-router, or do I have to set up a parent/child relationship between the components?

解决方案

What you want is to implement some object that stores your state, that can be modified using callback functions. You can then pass these functions to your React components.

For instance, you could create a store:

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
  );

Now, both the FirstComponent and SecondComponent instances can call this.props.mergeState({ . . .}) to assign state to the same store.

I leave Store.prototype.getState as an exercise for the reader.

Note that you can always pass the store (myStore) itself to the components; it just feels less react-y to do so.

Here is some more documentation that might be of interest:

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.

这篇关于如何在两个 React 组件之间创建共享状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！