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

Question

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

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

我附上了布局图片。

  

主应用程序 - 是由标题，补充工具栏，   内容区。

     

侧栏包括 - 侧栏项目。

     

内容区域包含 - 内容项目。

主要问题

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

请注意，此布局有6个组件（应用程序，标题，补充工具栏，内容区，补充工具栏项，内容项）。

图片

Answer 1

您可以执行此操作的唯一方法是将状态和道具从父项直接传递给子项。如果孙子需要来自祖父母的州或道具，父母必须继续向下传递，直到它到达孙子。 React是单向的;从父母到孩子。

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

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

当补充工具栏中的状态更改时（在您的示例中，单击一次），它将反映在祖父母（主应用程序）上。由于在多个组件（内容区域）之间共享同一状态，因此将更新具有此状态的每个组件。

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

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

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

• https://egghead.io/courses/getting-started-with-redux
• http://redux.js.org/docs/introduction/
• https://github.com/reactjs/redux/tree/master/examples

Answer 2

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

这样，您可以使用'connect'将状态映射到props，并根据需要在组件之间传递状态。请查看here以获取有关如何实施它的更多信息。