什么是{this.props.children}？何时使用？

Question

作为React世界的初学者，我想深入了解我使用时会发生{this.props.children}什么以及使用该情况的情况。以下代码段的意义是什么？

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

Answer 1

“孩子”到底是什么？

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快速入门