ReactJS：为啥要使用 this.props.children？

Posted 2023-02-22

【中文标题】ReactJS：为啥要使用 this.props.children？

【英文标题】：ReactJS: Why use this.props.children?ReactJS：为什么要使用 this.props.children？

【发布时间】：2016-12-01 13:53:03

【问题描述】：

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

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

正在像这样嵌套组件...

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

...这样编曲有好处吗？：

A.js

render() 
    <B />
    <C />

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

【问题讨论】：

如果你不知道孩子是什么？考虑一个包装组件，它将某些样式或操作应用于其子级，无论它们是什么。此外，它不是关于一个组件，而是更多关于应用程序，当你用 react 构建一个网站时，你会使用它

【参考方案1】：

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

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

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

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

【讨论】：

好点，这是让我冷静下来的最有用的答案。

【参考方案2】：

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

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

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

或者：

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

【参考方案3】：

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

我们建议此类组件使用特殊的 children 属性将子元素直接传递到其输出中： Read More...

【参考方案4】：

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

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

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

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