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

【问题标题】：ReactJS - Passing props (state) to children of childrenReactJS - 将道具（状态）传递给孩子的孩子
【发布时间】：2017-06-03 09:19:59
【问题描述】：

我有一个简单的问题。 如何将状态传递给children的children？

如果父级有某种状态，在 ES6 中最好的方式是将该状态不传递给其直接子级，而是传递给直接子级的子级。

我附上了布局的图片。

主应用程序 - 是主要组件，由 Header、Sidebar、内容区。

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

内容区由 - 内容项组成。

主要问题

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

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

图片

【问题讨论】：

【解决方案1】：

你可以做到这一点的唯一 React 方法是将 state 和 props 从 parent 直接传递给 child。如果孙子需要祖父母的状态或道具，则父母必须继续向下传递，直到到达孙子。 React 是单向的；仅从父母到孩子。

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

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

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

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

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

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

【讨论】：

【解决方案2】：

如果您正在以更复杂的方式处理状态，则可能值得考虑使用 Redux 来处理整个应用程序的状态。

这样，您可以使用“连接”将状态映射到道具，并根据需要在组件之间传递状态。查看here 了解更多关于如何实现它的信息。

【讨论】：