“孩子”到底是什么?
React文档说,您可以props.children
在代表“通用框”并且不提前知道其子级的组件上使用。对我来说,这并没有真正清除一切。我可以肯定的是,这个定义很合理,但对我而言却不是。
我对操作的简单解释this.props.children
是,它用于在调用组件时显示在开始和结束标记之间包含的所有内容。
一个简单的例子:
这是用于创建组件的无状态函数的示例。同样,由于这是一个函数,因此没有this
关键字,因此只需使用props.children
const Picture = (props) => {
return (
<div>
<img src={props.src}/>
{props.children}
</div>
)
}
此组件包含一个<img>
正在接收一些内容的props
,然后显示{props.children}
。
每当调用此组件{props.children}
时,也会显示该组件,这仅是对该组件的开始和结束标记之间的引用。
//App.js
render () {
return (
<div className='container'>
<Picture key={picture.id} src={picture.src}>
//what is placed here is passed as props.children
</Picture>
</div>
)
}
<Picture />
如果调用该组件将完全打开和关闭标签<Picture> </Picture>
,则无需使用自动关闭标签来调用该组件,而是可以在其之间放置更多代码。
这将<Picture>
组件与其内容分离开来,并使其更可重用。
参考:React的props.children快速入门