ReactJS:为什么使用 this.props.children？

Question

我意识到我编写的组件都没有使用 {this.props.children}。

我倾向于按照官方文档在 https://facebook.github.io/react/docs/multiple-components.html 顶部所述的方式来构建我的组件。 .

是否像这样嵌套组件...

<A>
  <B />
  <C />
</A>

...比这样编写它们更有好处吗？:

A.js

render() {
    <B />
    <C />
}

假设这是正确的术语，我错过了什么？

Answer 1

在我的应用程序中，我很少使用 this.props.children，因为我经常明确地知道我想要渲染哪些子项。在库或为在特定组件层次结构之外重用而编写的组件中，我经常看到这种情况。我认为 this.props.children 与该用例更相关。

编辑:我想我应该详细说明 this.props.children 可以派上用场的一些情况。一个这样的例子是创建遵循“render prop”的组件时。 ' 图案。也就是说，我有一些组件需要从多个“渲染 Prop ”HOC 中提取数据，例如 Apollo 查询组件以及状态管理 HoC。我将所有不同的数据源组合到一个 HoC 中，然后将 Children 作为一个函数调用，传入提取我需要的所有数据的结果。话虽如此，这些天我更喜欢并期待 Hooks 得到更广泛的采用。作为渲染 Prop 的替代方案。

实际上是您想要渲染任意子级的任何组件；我使用 props.children 的另一个例子是在创建一个 HoC 时，需要在渲染子项之前对用户进行身份验证，在用户未登录时重定向到登录屏幕。我可以包装任何“ protected ”的屏幕组件有了这个授权 HoC。

它仍然是我的大多数组件不使用的东西，但只是情况需要时应用的另一种工具。