Как получить конкретного ребенка в компоненте React?

Question

В приведенном ниже простом примере я ищу способ получить, например, CardBody child.

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.Если целью является вывод необязательных дочерних элементов в указанном порядке, это можно сделать аналогично этому ответу :

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>