Question

在下面的简单示例中，我正在寻找一种方法来获取例如CardBody的孩子。

const Card = ({children}) => {
  const cardHeadChild = ...;
  const cardBodyChild = ...;
  return (
    <div>
      {cardHeadChild}
      {cardBodyChild}
    </div>
  )
}

const CardHead = () => <div>Head</div>
const CardBody = () => <div>Body</div>

// Usage:
<Card>
  <CardHead>
  <CardBody>
</Card>

因为子级是可选项，所以我无法按索引获取数据（例如：React.Children.toArray(children)[1]）。

我尝试过这样的事情：

React.Children.forEach(children, child => {
   if(child.type.name === 'CardBody') cardBodyChild = child
   // or
   if(child.type.displayName === 'CardBody') cardBodyChild = child
  ..
})

但是当组件包装在HOC中时，它不起作用。

任何解决方案吗？

Answer 1

函数name不应在生产客户端代码中使用，因为当应用程序缩小时，函数名称将被篡改。 displayName同样适用-除非明确设置。还要注意，displayName和name的主要用法是调试。

孩子可以由React元素type标识。如果目的是按照指定顺序输出可选子级，则可以类似于this answer进行此操作：

Optional head:
{props.children.find(({ type }) => type === CardHead)}
Optional body:
{props.children.find(({ type }) => type === CardBody)}

期望子级应该完全是CardHead和CardBody无状态组件。如果需要使用其他组件来增强其功能，CardHead和CardBody应该包装以下组件：

const CardHead = props => <div>
  Head
  {props.children}
</div>

...

<Card>
  <CardHead><SomeComponent/></CardHead>
</Card>

如何在React组件中获取特定的孩子？

1 个答案: