React 新手:在未链接的组件之间共享状态
React newbie: sharing state across unlinked components
我是 React 新手,正在尝试将 React 集成到 Rails 站点中。我在 page/html 的最顶部有一个 CommentForm
组件,在同一页面的底部有一个 Comments
组件。目前都是通过React-On-Rails'react_component
方式渲染的
问题是,在 CommentForm
中提交表单后,我想更改 Comments
组件中的 this.state.comments
。我很熟悉确保状态冒泡到一个公共父组件的想法,但目前,这两个组件没有公共父组件(或根本没有任何父组件)。
因此,免责声明我已经学习 React 整整 2 天并且可能非常困惑,克服此类问题的最佳实践是什么?我看到的选项:
- 将整个 rails 视图重写为单个父组件,将两个组件作为其下的子组件。这听起来并不有趣 - 页面上的两个组件之间有很多 rails 助手生成了很多 html
- 使用 Redux 创建一个在两个组件之间共享的商店(???)
- 以某种方式创建一个父组件,同时仍然在页面的不同部分呈现其他两个组件(?)
- 从
CommentForm
或某些共享资源(例如:window
范围)访问 Comment
的状态属性,根据我有限的理解,这不是 React 方式
我猜这是一个常见问题,但我不确定解决它的一般智慧是什么。任何想法表示赞赏。
第一个选项是仅使用反应方式(没有外部库)。如果你的项目不是那么大,可能是一个解决方案。
第三个和第四个选项肯定不行。
对于您所说的,使用 Redux 似乎是最简单 的解决方案。
Comments
组件应该绘制全局商店中的所有评论,CommentForm
应该将评论添加到商店(并可能发送 AJAX 保存服务器的请求边也)。
然后,这些组件将共享相同的 Provider
并可以访问相同的商店。
我建议你观看 Dan's Course
老实说,Redux 是完美的用例。实施起来不会花太长时间,但如果您以前从未做过,您将需要一两天的时间来思考它。
一般来说,随着您的项目越来越大,您将更容易管理一个状态,而不是管理一千个组件范围的状态。
所以,如果你有更多这样的情况,或者你必须通过超过 3 个组件传递 props 的情况。我现在就实施 Redux 并成为未来的证明。
我是 React 新手,正在尝试将 React 集成到 Rails 站点中。我在 page/html 的最顶部有一个 CommentForm
组件,在同一页面的底部有一个 Comments
组件。目前都是通过React-On-Rails'react_component
方式渲染的
问题是,在 CommentForm
中提交表单后,我想更改 Comments
组件中的 this.state.comments
。我很熟悉确保状态冒泡到一个公共父组件的想法,但目前,这两个组件没有公共父组件(或根本没有任何父组件)。
因此,免责声明我已经学习 React 整整 2 天并且可能非常困惑,克服此类问题的最佳实践是什么?我看到的选项:
- 将整个 rails 视图重写为单个父组件,将两个组件作为其下的子组件。这听起来并不有趣 - 页面上的两个组件之间有很多 rails 助手生成了很多 html
- 使用 Redux 创建一个在两个组件之间共享的商店(???)
- 以某种方式创建一个父组件,同时仍然在页面的不同部分呈现其他两个组件(?)
- 从
CommentForm
或某些共享资源(例如:window
范围)访问Comment
的状态属性,根据我有限的理解,这不是 React 方式
我猜这是一个常见问题,但我不确定解决它的一般智慧是什么。任何想法表示赞赏。
第一个选项是仅使用反应方式(没有外部库)。如果你的项目不是那么大,可能是一个解决方案。
第三个和第四个选项肯定不行。
对于您所说的,使用 Redux 似乎是最简单 的解决方案。
Comments
组件应该绘制全局商店中的所有评论,CommentForm
应该将评论添加到商店(并可能发送 AJAX 保存服务器的请求边也)。
然后,这些组件将共享相同的 Provider
并可以访问相同的商店。
我建议你观看 Dan's Course
老实说,Redux 是完美的用例。实施起来不会花太长时间,但如果您以前从未做过,您将需要一两天的时间来思考它。
一般来说,随着您的项目越来越大,您将更容易管理一个状态,而不是管理一千个组件范围的状态。
所以,如果你有更多这样的情况,或者你必须通过超过 3 个组件传递 props 的情况。我现在就实施 Redux 并成为未来的证明。