什么是 {this.props.children} 以及何时应该使用它？

小编典典

什么是 {this.props.children} 以及何时应该使用它？

all

作为 React
世界的初学者，我想深入了解我在使用时会发生什么{this.props.children}以及在哪些情况下使用它。它在下面的代码片段中的相关性是什么？

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

阅读 71

2022-07-06

共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 快速介绍

2022-07-06