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

编辑：我想我会详细说明 this.props.children 可以派上用场的一些情况。一个这样的例子是在创建遵循“渲染props”模式的组件时。即我有一些组件需要从多个“渲染props”HoC 中提取数据，例如 Apollo Query 组件以及状态管理 HoC。我将所有不同的数据源组合到一个 HoC 中，然后将 children 作为函数调用，传入提取我需要的所有数据的结果。话虽如此，我更喜欢并期待更广泛地采用Hooks作为渲染props的替代品。

真的是你想要渲染任意子组件的任何组件；我使用过的另一个例子 props.children 是在创建一个要求用户在呈现孩子之前进行身份验证的 HoC 时，在用户未登录时重定向到登录屏幕。我可以包装我的任何“受保护”屏幕组件有了这个 auth HoC。

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

我会说当您不知道要渲染什么时它会很有用。

例如，您有一个工具提示包装器，假设它是A您场景中的组件，您可以使用它来传递不同的内容：

<A>
    <div>Some text...</div>
    <ImageComponent />  // render an image as well
</A>

或者：

<A>
    <div>Only text</div>
</A>

一些组件提前不知道他们的孩子。这对于像 Sidebar 或 Dialog 这样代表通用“框”的组件尤其常见。

我们建议此类组件使用特殊的 children 属性将子元素直接传递到它们的输出中： 阅读更多...

Children 是一个特殊的 prop，可以从所有者传递给在其渲染方法中定义的组件。它允许我们自定义组件的结构。

使用 props，子组件可以完全控制其结构，并且只允许传递某些属性或值。组件的结构是硬编码的。

在 React 文档中，children属性被描述为opaque，因为它是一个不告诉任何关于它包含的值的属性。因此，它允许客户/父母自定义结构。

我们也可以说，组件只定义了一种基本的模板/结构，例如通过提供一种“标题”。消费者通过添加子项来重用这个头结构。