0

我已经阅读了很多文章以找出 this.props.children 的实时用例，但我没有找到我正在寻找的答案。我知道 this.props.children 用于访问 b/w 数据组件的开始和结束标记。但我的问题是为什么我们不能向组件添加道具，而不是写入数据 b/w 开始和结束标记。例如：

<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 来完成某个任务吗？

4

2 回答 2

2

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

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

这会比你这样写更容易：

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

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

于 2017-11-23T06:20:54.457 回答
0

在制作应用程序时，您需要一个父组件来渲染组件中的任何内容。我能想到的用例是：

  1. 当您想要根据路线更改打开不同的组件时。

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

  2. 当您希望在整个应用程序中为通用元素（例如 等）使用相同的样式body时head。您只需要在此组件上应用，例如，在上面的示例中，full-height将在应用程序顶部组件的任何地方应用。（显然还有其他解决方法，但这总是更清楚）

  3. 对于您想要公开组件的用例（当组件不提前知道子组件时），因为库和道具可能会发生很大变化并使渲染复杂化。读这个

显然您不必使用它，但它使代码更加优雅和易于理解。

于 2017-11-23T06:27:22.973 回答