2016-07-27 62 views
14

我意识到没有任何组件使用{this.props.children}ReactJS:为什么使用this.props.children?

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

是嵌套这样的组件...

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

...有益构成了他们喜欢这个?:

A.js

render() { 
    <B /> 
    <C /> 
} 

。假定是这样的正确的术语,我错过了什么?

+0

如果你不知道孩子是什么?想想一个包装器组件,它将一些样式或动作应用到子项中,而不管它们是什么。此外,它更少关于一个组件,更多关于应用程序,当你用反应建立一个站点时,你会使用它 – JordanHendrix

回答

19

在我应用程序我很少使用this.props.children,因为我经常知道具体要渲染的孩子。在图书馆或者在特定应用程序之外重新使用的组件中,我经常见到它。我认为this.props.children与该用例更相关。

+0

好点,这是平息我的想法最有用的答案。 – MattDuFeu

9

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

例如,你有一个提示的包装,让我们说这是在您的情况A组件,你可以用它来传递不同的内容:

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

或者:

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

某些组件提前不知道他们的孩子。这对于代表通用“盒子”的组件(如边栏或对话框)尤其常见。

我们建议这样的组件使用特殊儿童道具子元素直接传递到它们的输出: Read More...