javascript - 如何管理独立 react 组件之间的通信?

标签 javascript reactjs frontend redux reactjs-flux

我想实现一个类似于messenger.com的Web应用程序,也基于react框架。我的问题是管理列表和内容组件之间的通信,因为它们彼此无关。它们的父组件的 render 方法如下所示:

返回( “<”列表“/>” "<"内容"/>" )

我希望内容组件根据所选列表元素刷新并加载一些数据,类似于messenger.com。 Here's simple mockup

我已经阅读了很多有关 redux 的内容,但我根本无法想象在这种情况下应该如何实现它。

这也是我在浏览器端运行的整个 react 脚本:http://pastebin.com/ua928BEc

抱歉,如果这是一个菜鸟问题,我只是从 react 开始:)

非常感谢您阅读本文,

沃伊泰克

最佳答案

Thinking in React是一个很好的教程,解释了 React 中的状态所有权以及组件如何通信。一旦您熟悉了它,您就可以尝试在 vanilla React 中实现它。

当您熟悉 React 但注意到某些组件由于所有状态处理逻辑而变得臃肿时,您可能需要查看像 Redux 这样的 Flux 实现来将状态处理卸载给它。 Getting Started with Redux是一组使用 Redux 和 React 的免费介绍视频,官方 basics tutorial 对它们进行了很好的补充。 .

但是don’t rush into Flux or Redux until you understand React .

关于javascript - 如何管理独立 react 组件之间的通信?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35468666/

相关文章:

javascript - 垂直内嵌行情自动收录器

javascript - 在 SlideToggle nag 上添加事件类

css - 分页没有居中?

javascript - 如何从 reactjs 中的 json 响应字段加载图像

html - 负 z 索引不适用于::after 伪元素

javascript - AngularJS、Onsen UI、Phonegap、警报在 Controller 内显示两次

javascript - 如何使用 HTML5 从客户端访问 Secugen Hamster Plus

javascript - 将动态形式序列化为对象数组

node.js - textarea 和 input HTML 元素之间的安全差异?

javascript - 当值相等时,React hooks useState setValue 仍然会重新渲染一次