Question

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

Answer 1

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

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类将始终完全自包含，并且可以根据需要进行复制，而不会有任何名称重用的风险。

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

1 个答案: