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与该用例更相关.

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 这样代表通用“框”的组件尤其常见。

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