Question

我正在学习本教程，教师做了类似这样的事情来解释高阶组件

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

export default aux;

然后导入这个到其他文件，并将div标记替换为<Aux>标记。

现在，我很难理解这一点，因为我不太确定 props.children 实际上做了什么（因为我们以前几乎没有在演讲中使用过它）

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

有人可以解释我一般使用 props.children 吗？

Answer 1

props.children 就像React中的其他道具一样，但它在标签之间传递的方式不同（当使用JSX时）：

<Component>text</Component>

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

undefined，null，布尔值，数字，字符串，a React元素，或递归的任何类型的数组。

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

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

几乎就是这样。 React documentation.

当然有更多细节

Answer 2

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

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

Answer 3

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

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

容器组件可以像

一样使用

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

Answer 4

该标准已内置以作出反应16.3并替换为＆lt;＆gt;。当你需要渲染多个组件但由于样式或任何其他原因而不希望将它们包装起来时，你会使用它。

例如：

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

无法反应但是：

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

或：

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

以上都可行。什么是Aux或＆lt;＆gt;

什么是props.children？

4 个答案: