ruby-on-rails - react 新手: sharing state across unlinked components

标签 ruby-on-rails reactjs react-redux react-on-rails

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

问题是,在 CommentForm 中提交表单后,我想更改 Comments 中的 this.state.comments成分。我熟悉确保状态冒泡到公共(public)父组件的想法,但目前,这两个组件没有公共(public)父组件(或根本没有任何父组件)。

因此,免责声明我已经学习 React 2 天了,并且可能非常困惑,克服此类问题的最佳实践是什么?我看到的选项:

  • 将整个 Rails View 重写为单个父组件,并将两个组件作为下面的子组件。这听起来并不有趣 - 页面上的两个组件之间有很多 Rails 助手生成了很多 html
  • 使用 Redux 创建一个在两个组件之间共享的存储(???)
  • 以某种方式创建一个父组件,同时仍在页面的不同部分渲染其他两个组件(?)
  • CommentForm 或某些共享资源(例如:window 范围)内访问 Comment 的状态属性,据我有限的理解,这不是 React 方式

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

最佳答案

第一个选项是仅采用 react 方式(没有外部库)。如果您的项目不是那么大,可能是一个解决方案。

第三个和第四个选项绝对不是可行的方法。

对于你所说的,使用 Redux 似乎是最简单的解决方案。

Comments 组件应该绘制全局商店中的所有评论,并且 CommentForm 应该将评论添加到商店(并且可能发送 AJAX 请求以保存服务器方也)。

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

我建议您观看Dan's Course

关于ruby-on-rails - react 新手: sharing state across unlinked components,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48302935/

相关文章:

json - 在 ReactJs 中基于动态路径加载图像

reactjs - 如何让 React 组件等待 redux 存储变量设置?

mysql - 如何确定 Rails 中的多个分组记录?

ruby-on-rails - 使用祖先 gem 订购子树导航

javascript - 试图获取列表项的 Prop 值

javascript - 如何从另一个组件显示 react 引导模式

reactjs - Redux reducer 按名称从列表中删除对象

ruby-on-rails - 运行 webbrick 的 Ubuntu 上的 ImageMagick 冲突

ruby-on-rails - 何时在Rails中创建新的 Controller

reactjs - React JS 虚拟主机