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与该用例有更多相关性。

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

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

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

Answer 2

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

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

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

或者：

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

Answer 3

有些成分提前不了解自己的孩子。这对于像Sidebar或Dialog这样代表泛型＆＃34; box＆＃34;。

的组件尤其常见

我们建议这些组件使用特殊的子prop将子元素直接传递给它们的输出： Read More...

Answer 4

Children是一个特殊的道具，可以从所有者传递到其render方法中定义的组件。它使我们可以自定义组件的结构。

使用props时，子组件将其结构保持在完全控制之下，并且仅允许传递某些属性或值。组件的结构是硬编码的。

在React文档中，children属性被描述为 opaque ，因为该属性不会告诉任何有关其包含的值的信息。结果，它允许客户/父母自定义结构。

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

ReactJS：为什么要使用this.props.children？

4 个答案: