ReactJS - 将道具（状态）传递给孩子的孩子

Question

我有一个快速的问题。如何将状态传递给孩子的孩子？

如果父级有某种状态，那么在 ES6 中将这种状态传递给直接子级而不是直接子级的子级的最佳方式是什么。

我附上了布局的图像。

主应用程序 - 是由标题、侧边栏、内容区域组成的主要组件。

侧边栏由 - 侧边栏项目组成。

内容区包括 - 内容项。

主要问题

如何通过单击侧边栏项目更新内容区域中的组件？

请注意，此布局有 6 个组件（App、Header、Sidebar、Content Area、Sidebar Item、Content Item）。

图片

Answer 1

您可以执行此操作的唯一 React 方法是将 state 和 props 从父级直接传递给子级。如果孙子需要祖父母的状态或道具，父母必须不断向下传递它，直到它到达孙子。React 是单向的；仅从父母到孩子。

因此，在您的情况下，祖父级（主应用程序）将包含一些将传递给子级（侧边栏和内容区域）的状态。例如，从父组件中，您可以像这样将状态传递给子组件：

<Sidebar someState={this.state.someParentState} />
<ContentArea someState={this.state.someParentState} />

当侧边栏中的状态发生变化（在您的示例中，单击）时，它将反映在祖父级（主应用程序）上。由于此相同状态在多个组件（内容区域）之间共享，因此将更新具有此状态的每个组件。

现在，如果您在想，“哇，如果有多个孩子，并且有孩子的孩子，这会不会变得一团糟？”。答案是：“是的，可以！” 这就是状态容器（Redux、Flux、MobX）的用武之地。这就是为什么要使用状态容器的原因：

将状态直接插入到任何孩子。例如，它不必从父母传到孩子，它可以从祖父母直接传给孙子。在 Redux 中，您只需使用connectandmapStateToProps函数将 state 的一部分作为 props 连接到单个组件即可。
在较大的应用程序中，状态更容易维护和处理。尝试通过向下、向下、再向下传递状态来仅使用 React 创建 Facebook。
将状态与组件分离。由于 React 用于“构建 UI 界面”，因此将状态与表示分开是明智的。对于简单的情况，这没问题，但随着应用程序变得越来越复杂，情况就不是这样了。

考虑 Redux（最流行的状态容器）的以下资源：