React 新手：在未链接的组件之间共享状态

Posted 2023-02-15

【中文标题】React 新手：在未链接的组件之间共享状态

【英文标题】：React newbie: sharing state across unlinked components

【发布时间】：2018-06-26 10:36:16

【问题描述】：

我是一名 React 新手，正在尝试将 React 集成到 Rails 站点中。我在页面/html 的最顶部有一个CommentForm 组件，在同一页面的底部有一个Comments 组件。目前两者都是通过 React-On-Rails 的react_component 方法渲染的。

问题是，在CommentForm 中提交表单后，我想更改Comments 组件中的this.state.comments。我很熟悉确保状态冒泡到一个共同的父组件的想法，但是目前，这两个组件没有共同的父组件（或根本没有任何父组件）。

那么，我已经学习了 2 天的 React 并且可能非常困惑，那么，克服此类问题的最佳实践是什么？我看到的选项：

将整个 rails 视图重写为单个父组件，其中两个组件作为其下的子组件。这听起来并不有趣 - 页面上的两个组件之间有很多 rails helpers 生成了很多 html 使用 Redux 创建一个在两个组件之间共享的存储 (???) 以某种方式创建一个父组件，同时仍然在页面的不同部分呈现其他两个组件（？） 从 CommentForm 或某些共享资源（例如：window 范围）内访问 Comment 的状态属性，据我有限的理解，这不是 React 方式

我猜这是一个常见问题，但我不确定解决它的一般智慧是什么。任何想法表示赞赏。

【参考方案1】：

第一个选项是只做反应方式（没有外部库）。如果您的项目不是那么大，可能是一个解决方案。

第三和第四个选项绝对不是要走的路。

正如你所说，使用 Redux 似乎是最简单的解决方案。

Comments 组件应该绘制全局存储中的所有 cmets，CommentForm 应该将 cmets 添加到存储中（还可能发送 AJAX 请求以保存服务器端）。

然后，这些组件将共享相同的Provider 并可以访问相同的 Store。

我建议你看Dan's Course

【讨论】：

我花了一个晚上来研究 Redux，这显然是正确的解决方案。非常感谢。

【参考方案2】：

老实说，Redux 是一个完美的用例。实施并不需要太长时间，但如果你从未做过，那么你将需要一两天的时间来解决它。

一般来说，随着您的项目越来越大，您将更容易管理一个状态，而不是一千个组件范围的状态。

所以，如果您要遇到更多这样的情况，或者您必须通过超过 3 个组件传递道具的情况。我现在就实施 Redux 并成为未来的证明。