Question

我已阅读了很多文章，以找出this.props.children的实时用例，但我找不到我要找的答案。我知道this.props.children用于访问b / w组件的开始和结束标签。但我的问题是为什么我们不能在组件中添加道具而不是写入数据b / w打开和关闭标签。对于Ex：

<Example>This is data<Example> //can be accessed as this.props.children
can be written as 
<Example data="This is data"/> //can be accessed as this.props.data

有人可以通过一个实时的例子向我解释一下我们只能使用this.props.children来实现某项任务吗？

Answer 1

例如，如果您有一个组件的复杂子项：

<Card>
   <div class='title'>Title</div>
   <div class='content'>Content</div>
</Card>

这比你写的更容易：

<Card content={[<div class='title'>Title</div>, <....>]} />

您可以在此处找到相同内容，例如在Material-UI here的Drawer组件中。抽屉是一个从左侧滑动的组件，它可以包含任何东西，所以使用props.childrens。

Answer 2

在制作应用时，您需要一个将在组件中呈现任何内容的父组件。我能想到的用例是：

如果要根据路线更改打开其他组件。

const App = ({ children }) => (
    <div className="full-height">
        {children}
    </div>
);

如果您想在整个应用中使用相同的样式来处理通用元素，例如body，head等等。您只需要应用此组件，例如，在上面的示例中，full-height将应用于顶部组件的应用程序中的任何位置。（显然还有其他工作，但这一点总是更清楚）
对于您希望公开组件的用例（当组件未提前知道子组件时），因为库和道具可能会有很大差异并使渲染变得复杂。阅读this

显然你不必使用它，但它使代码更优雅，更容易理解。

this.props.children

2 个答案: