首页 文章

反应新手:在未链接的组件之间共享状态

提问于
浏览
8

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

问题是,在 CommentForm 中提交表单后,我想在 Comments 组件中更改 this.state.comments . 我有一个共同的父母(或任何父母) .

所以,由于免责声明我一直在学习React 2天而且很可能很困惑,克服这类问题的最佳做法是什么?我看到的选项:

  • 将整个rails视图重写为单个父组件,其中两个组件为下面的子组件 . 这不是很多html由页面上的两个组件之间的很多rails助手生成的

  • 使用Redux创建一个在两个组件之间共享的存储(???)

  • 以某种方式创建父组件,同时仍然在页面的不同部分呈现其他两个组件(?)

  • CommentForm 或某些共享资源(例如: window 范围)中访问 Comment 的状态属性,根据我的有限理解,它不是React Way

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

2 回答

  • 2

    第一种选择只是做反应方式(没有外部库) . 如果您的项目不是那么大,可能是一个解决方案 .

    绝对不是第三种和第四种选择 .

    就你所说,使用Redux似乎是最简单的解决方案 .

    Comments 组件应该绘制全局存储中的所有注释, CommentForm 应该将注释添加到存储(并且可能还发送一个AJAX请求以保存服务器端) .

    然后,这些组件将共享相同的 Provider 并可以访问同一个商店 .

    我建议你看Dan's Course

  • 6

    Redux是一个完美的用例 . 实施起来并不需要太长时间,但如果你还没有完成它,那么在你需要一两天的时间来完成它之前 .

    通常,随着项目的增长,您将更容易管理一个州而不是一千个组件范围的州 .

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

相关问题