什么是 props.children？ [复制]答案

【问题标题】：What is props.children? [duplicate]什么是 props.children？ [复制]
【发布时间】：2018-04-25 17:47:34
【问题描述】：

我正在关注本教程，讲师做了类似的事情来解释高阶组件

const aux = (props) => props.children;

export default aux;

然后将其导入到其他文件并用<Aux>标签替换div标签。

现在，我有点难以理解这一点，因为我不太确定 props.children 究竟做了什么（因为我们以前在整个讲座中几乎没有使用过它）。

我做了一些谷歌搜索，并在网上浏览了一两篇文章，但由于某种原因，他们的描述非常模糊。

谁能解释一下props.children的一般用法？

【问题讨论】：

codeburst.io/…
props.children 指代传入组件的任何子元素。
@RoyJ 这是第一篇弹出的文章，绝对是一篇有趣的文章，但我迷失在这个声明中 当调用组件时，我传递了一个
官方文档似乎涵盖了这一点：reactjs.org/docs/composition-vs-inheritance.html#containment

标签： reactjs

【解决方案1】：

props.children 与 React 中的所有其他 prop 一样，但它在标签之间的传递方式不同（使用 JSX 时）：

<Component>text</Component>

您在标签之间放置的内容将作为props.children 传递给组件。它can be：

未定义，null，布尔值，数字，字符串，a 以递归方式反应元素或任何这些类型的数组。

也可以是一个函数，返回上面的一个^来创建render prop pattern.

如果您想直接使用 children 道具（filter 或 map 他们），您可能需要一些 React utility functions。

差不多就是这样。 React documentation.当然还有更多详情

【讨论】：

我相信同样重要的是要注意，当您需要返回子组件列表但您没有真的想把它们放在
下 - 正如@steve-bohmbach 所解释的那样，可能存在样式问题。
原版 JS 中是否使用了 props.children？还是仅仅是反应代码？
@DimitrisPapageorgiou 仅在 React 中

【解决方案2】：

通常，每个组件的子组件实际上是一个数组。但是当只有一个子组件时，props.children 将是没有数组包装器的单个子组件。

所以在这种情况下：const aux = (props) => props.children; 这将返回一个组件。

【讨论】：

【解决方案3】：

该标准已被内置以响应 16.3，并被替换为。当您需要渲染多个组件但由于样式或任何其他原因不希望将它们包装起来时，您可以使用它。

例如：

     <CustomeHeader />
     <CustomTable />
     <CustomFooter />

无法在 react 中渲染，但是：

     <>
       <CustomeHeader />
       <CustomTable />
       <CustomFooter />
     </>

或：

   <aux>
      <CustomeHeader />
      <CustomTable />
      <CustomFooter />
   </aux>

以上两种方法都可以。 Aux 或

里面有什么

【讨论】：

【解决方案4】：

props.children 通常在创建容器组件时使用，其中容器组件在不同的实例中会有不同类型的子组件。

class Container extends React.Component{
  render(){
    return(
      <div>
        <div className="Header">AppName</div>
        {props.children}
      </div>
    )
  }
}

容器组件可以这样使用，

<Container>
  <div>foo</div>
</Container>

【讨论】：