流程：如何访问children.type.displayName

Question

如果孩子是我希望使用显示名称的组件类型，则我有一个组件将应用一些额外的逻辑。

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';

表示子级可以为null /未定义。但是，在流定义中，您尚未指定。

也是这样：

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

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

  // ...
}