只允许某些组件作为 children (React, TypeScript)

Question

这个问题被问了很多次，我花了几个小时来回答。但是，我无法让我的代码工作。问题来了。

我有一个 Steps 组件，它是一个包装器。我有多个 Step 组件进入 Steps 组件作为 children.

在我的 Steps 组件中，我想创建一个新的 children 数组，它只包含 Step 个组件。我只想忽略其他一切。同时在控制台上显示一些警告，即 除 Step 组件 child 之外的任何内容都将被忽略 ，这很好，但无论如何，这在这一点上并不重要。

<Steps>
  <Step>Hello</Step> // should be rendered
  <div>Please ignore me</div> // should be ignored
  <Step>How are you?</Step> // should be rendered
</Steps>

问题是，我正在使用 TypeScript，但我无法访问 child.type 正如其他问题中的许多其他答案所建议的那样。

错误如下：

Property 'type' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
  Property 'type' does not exist on type 'string'.ts(2339)

当我将鼠标悬停在 child 上时，它会显示：

(parameter) child: React.ReactChild | React.ReactFragment | React.ReactPortal

你能给我指明正确的方向吗？我如何检查 child 和 return 的类型，一个新的 children 数组只有 Step 的实例？

Answer 1

终于找到解决办法了。

当我在 props.children 上应用 React.Children.Map 时，child 应为 string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactNodeArray | React.ReactPortal.

类型

在子项上应用 React.isValidElement(child) 过滤器后，它会从联合类型中删除所有非 ReactElement 项并留下 React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactPortal。之后，type 属性出现在 child 值上。

只允许某些组件作为 children (React, TypeScript)

Only allow certain component as children (React, TypeScript)

reactjs

typescript

npm

children