Reactjs 如何在非父子组件之间共享数据？

子-父关系中的组件之间共享数据的过程在React文档中有很好的文档记录并直接处理。不太明显的是，在不共享子-父关系的组件之间共享状态和任意数据的公认方式。Flux是作为一种解决方案提供的，在过去我已经推出了自己的发布/订阅系统，但在这个领域，reactjs开发人员之间似乎仍然存在很大的分歧。RxJS是作为一种解决方案提供的，在observer模式上有许多变体，但我想知道是否有更规范的方法来管理这个问题，特别是在组件绑定不太紧密的大型应用程序中

我的解决方案通常是将回调作为道具传递给将接受用户输入的组件。回调在父对象中执行状态更改，该更改向下传播。例如：

UI = React.createClass({
  getInitialState() {
    return {
      text: ""
    };
  }

  hello(text) {
    this.setState({
      text: text
    });
  }

  render() {
    return (
      <div>
        <TextView content={this.state.text}>
        <Button onclick={() => this.hello("HELLO WORLD")}>
      </div>
    );
  }
});
// TextView and Button are left as an exercise to the reader

UI=React.createClass({
getInitialState（）{
返回{
案文：“”
};
}
你好（文本）{
这是我的国家({
文本：文本
});
}
render（）{
返回(
这个。你好（“你好世界”）}>
);
}
});
//文本视图和按钮留给读者作为练习

---

我喜欢这一点，因为每个父组件仍然对其内容负责，而子组件彼此之间没有任何干扰性的了解；都是回拨。不可否认，它可能无法很好地扩展到大型react应用程序，但我喜欢没有一个全局事件调度器来管理一切，这使得控制流很难遵循。在本例中，

UI

类始终是完全独立的，并且可以根据需要进行复制，而不存在名称重用的风险。

这还不是父子关系吗？如果有两个

UI

“父”组件，它们都意味着与自己的子组件保持同步，那会怎么样？你能更新你的例子吗？@sjt003在这个例子中，按钮和文本视图是有关系的。建立和促进这种关系是父母的工作。在您的示例中，如果有两个需要通信的UI组件，则将它们都放在设置通信的父级下。我已经用一个按钮和TextView更新了这个例子，它们之间有着更直接的关系——按钮接收一个回调，直接调用TextView的setText方法。然而，我通常认为最好尽可能在图中把状态移得更高，把道具移得更低。@sjt003我的反应哲学是，任何可见的东西都应该根据道具和状态来管理。如果两个遥远的组件共享某个状态并需要保持同步，则该状态应存在于其父组件中。大多数React应用程序都有一个顶级父组件，该状态可以在其中出现。你能用一个例子来更新你的问题吗？在这个例子中，两个组件是完全分离的，它们不在单亲之下？