Поток: как получить доступ к children.type.displayName

Question

У меня есть компонент, который будет применять некоторые дополнительные логики c, если потомки - это тот тип компонента, который я ожидаю, используя отображаемое имя.

const ToggleButton = ({
  children,
}) => {
  // ...

  const isIcon = children?.type?.displayName === 'Icon';

  // ...
}

Код отлично работает при передаче строки, компонента , список компонентов. Но когда я добавляю поток, он начинает жаловаться, говоря:

Cannot get `children?.type` because property `type` is missing in `$Iterable`

Я использую React.Node, но должен ли я определять детей как другой тип?

// @flow

const ToggleButton = ({
  children: React.Node,
}) => {
  // ...

  const isIcon = children?.type?.displayName === 'Icon';

  // ...
}

Answer 1

const isIcon = children?.type?.displayName === 'Icon';

означает, что дочерние элементы могут быть нулевыми / неопределенными. Однако в определении потока вы не указали это.

Так что сделайте это:

const ToggleButton = ({
  children?: React.Node,
}) => {
  // ...

  const isIcon = children?.type?.displayName === 'Icon';

  // ...
}