props.children 是什么?

IT技术 reactjs
2021-05-04 10:12:50

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

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

export default aux;

然后将其导入到其他文件中并用div例如<Aux>tag替换tag。

现在,我有点难以理解这一点,因为我不太确定props.children实际做了什么(因为我们以前在整个讲座中几乎没有使用过它)。

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

有人可以解释我的props.children一般用途吗?

4个回答

props.children和 React 中的所有其他 prop 一样是一个 prop,但它在标签之间的传递方式不同(当使用 JSX 时):

<Component>text</Component>

您在标签之间放置的内容将作为props.children. 可以是

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

它也可以是一个返回上述 ^ 之一以创建渲染props模式的函数

如果你想直接在childrenprop(filtermap它们)上工作,你可能需要一些React 实用程序函数

差不多就是这样。当然,React 文档中有更多详细信息

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

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

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

例如 :

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

无法在react中呈现,但:

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

或者:

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

以上两个都可以。Aux 或 <> 里面有什么

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

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

容器组件可以像这样使用,

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