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
”模式的组件时。即，我有一些组件需要从多个“渲染道具”
HoC提取数据，例如Apollo
Query组件以及状态管理HoC。我将所有不同的数据源组合到一个HoC中，然后将子函数作为一个函数调用，并传入了提取所需数据的结果。话虽这么说，但我最近更喜欢并期待更广泛地使用Hooks作为渲染道具的替代方法。

实际上是您想要呈现任意子代的任何组件；我使用props.children的另一个示例是在创建HoC时，该HoC需要在呈现子项之前对用户进行身份验证，并在用户未登录时重定向到登录屏幕。我可以包装任何“受保护的”屏幕组件与此auth
HoC。

我的大多数组件仍然不使用它，只是在情况允许时可以使用的另一个工具。