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

3 回答

• 3

  您可以设置父子关系，然后可以将数据作为道具传递给子组件 .

  另外，如果你想在两个与（父/子）无关的组件之间创建交互，你可以查看flux甚至更好redux .

  我会说你应该选择redux . See Here why

  回复于 2024-04-26T09:11:54+08:00
• 0

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

  例如，如果您计划拥有一个中央商店，redux是一个很好的选择 . 但是其他方法也是可能的：

  • 父母对孩子

  • 道具

  • 实例方法

  • Child to Parent

  • 回调函数

  • 事件冒泡

  • 与兄弟姐妹同胞

  • 父组件

  • Any to Any

  • 观察者模式

  • 全局变量

  • 上下文

  请找到更多detailed information about each of the approaches here

  回复于 2024-04-26T09:11:54+08:00
• 11

  你想要的是实现一些存储你的状态的对象，可以使用回调函数进行修改 . 然后，您可以将这些函数传递给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"

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

  回复于 2024-04-26T09:11:54+08:00