React初学者必知：this.props.children是什么？何时使用？代码解析

作为React新手，你肯定好奇this.props.children到底是怎么工作的对吧？其实它就是React给组件内置的一个特殊props，专门用来接收组件在使用时嵌套在它标签内部的所有子元素。打个比方，你把组件当成一个带固定结构的容器，this.props.children就是这个容器里可以灵活替换的“填充内容”——不管是单个React元素、多个元素，甚至是文本、函数，它都能照单全收。React会自动把这些子元素处理成合适的格式：如果是单个子元素就直接返回该元素本身；如果是多个，就会变成一个数组，让你在组件的render方法里可以按需渲染。

适用场景 #

• 通用布局容器：这是最常见的用法，比如页面的导航栏、页脚是固定的，不同页面的主体内容不一样，就可以把布局做成一个组件，固定部分写在组件里，动态内容通过children传入，避免重复代码。
• 封装型组件（比如高阶组件）：如果你想给一组组件统一添加功能（比如权限校验、加载状态、日志埋点），就可以把这些组件作为children传给封装组件，在封装组件里处理完逻辑后再把children渲染出来。
• 内容分发组件：像Tabs、Accordion这类组件，每个标签页/折叠面板的内容都是使用者自定义的，通过children传入后，组件内部可以控制哪些内容显示、哪些隐藏。
• 灵活的UI组件：比如Card、Modal这类UI组件，组件本身提供固定的样式框架（比如卡片的边框、模态框的遮罩），但内部的具体内容由使用者通过children自定义，极大提升组件的复用性。

代码片段解析 #

先看这段代码：

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

这段代码是一个类组件的render方法，我们来拆解一下this.props.children的作用：

1. 首先判断appLoaded这个props是否为真，这应该是用来标识应用是否完成了初始化（比如用户信息、基础数据加载完毕）。
2. 当应用加载完成后，组件会渲染一个包含<Header>的父div，<Header>是自定义的导航组件，传入了应用名称和当前用户信息。
3. 这里的{this.props.children}就是用来接收并渲染当前组件被使用时，嵌套在它标签内部的所有子内容。举个实际使用的例子：

<AppContainer appLoaded={true} appName="我的React应用" currentUser={currentUser}>
  <ArticleList />
  <UserSidebar />
</AppContainer>

在这个例子里，<ArticleList>和<UserSidebar>就会被作为this.props.children，渲染到<Header>的下方，成为父div的子元素。这样这个组件就变成了一个通用的页面布局容器，不管后续要加什么页面内容，只要嵌套在这个容器里就行，完全不用修改布局组件本身的代码，非常灵活。

内容的提问来源于stack exchange，提问作者nim007