8

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

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

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

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

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

4

2 回答 2

6

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

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

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

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

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

我建议你看丹的课程

于 2018-01-17T14:22:11.927 回答
2

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

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

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

于 2018-01-17T14:52:41.097 回答