在父子关系中的组件之间共享数据的过程在 React 文档中有详细记录并直接处理。不太明显的是在不共享子父关系的组件之间共享状态和任意数据的公认方式。Flux 是作为解决方案提供的，过去我已经推出了自己的发布/订阅系统，但在这个领域的 reactjs 开发人员之间似乎仍然存在很大分歧。RxJS 已作为解决方案提供，以及观察者模式的许多变体，但我想知道是否有更规范的方法来管理这个问题，尤其是在组件绑定不那么紧密的大型应用程序中。
如何在非父子react组件之间共享数据？
IT技术
reactjs
publish-subscribe
observer-pattern
rxjs
reactjs-flux
2021-05-20 05:28:29
1个回答
我的解决方案通常是将回调作为props传递给将接受用户输入的组件。回调在父级中执行状态更改，该更改向下传播。例如：
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
我喜欢这样，因为每个父组件仍然对其内容唯一负责，而子组件不会侵入性地了解彼此；都是回调。诚然，它可能无法很好地扩展到大型React 应用程序，但我喜欢没有一个全局事件调度程序来管理所有内容，这使得控制流难以遵循。在此示例中，UI该类将始终是完全自包含的，并且可以根据需要进行复制，而没有任何名称重用的风险。
其它你可能感兴趣的问题