只允许某些组件作为子组件（React、TypeScript）答案

【问题标题】：Only allow certain component as children (React, TypeScript)只允许某些组件作为子组件（React、TypeScript）
【发布时间】：2021-11-03 09:42:06
【问题描述】：

这个问题被问了多次，我花了好几个小时回答。但是，我无法让我的代码正常工作。这就是问题所在。

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

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

<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 的类型并返回一个新的children 数组，其中只有Step 的实例？

【问题讨论】：

发现类似问题，检查一次stackoverflow.com/questions/27366077/…
我看到了那个。当我尝试检查 child.type 时，TypeScript 给了我一个错误，但接受的答案在那个问题中没有使用 TypeScript。

标签： reactjs typescript npm children

【解决方案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 值上。

【讨论】：