仅允许将某些组件作为子组件（React、TypeScript）
这个问题被问了好几次，我花了好几个小时来研究答案。但是，我无法使我的代码正常工作。问题就在这里。
我有一个Steps组件，它是一个包装器。我有多个Step组件作为子组件进入Steps组件。
在我的Steps组件中，我想创建一个新的子数组，它只由Steps组件组成。我只想忽略其他一切。同时在控制台上显示一些警告，除了步骤组件子元素之外的任何内容都将被忽略，这很好，但无论如何，这在这一点上并不重要。
<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，无法访问子对象。键入其他问题中的许多其他答案所提示的。
错误如下：
Property 'type' does not exist on type 'ReactChild | ReactFragment | ReactPortal'.
Property 'type' does not exist on type 'string'.ts(2339)
当我将鼠标悬停在子上时，它显示如下：
(parameter) child: React.ReactChild | React.ReactFragment | React.ReactPortal
你能给我指一下正确的方向吗？如何检查child的类型，并返回一个新的children数组，其中只包含Step的实例？
共有1个答案
终于找到了解决办法。
当我应用时，做出反应。儿童在道具上映射。子项，子项应为字符串|数字|布尔|{}类型。反应元素
应用后，进行反应。isValidElement（子项）在子项上进行筛选，它将从联合类型中删除所有非ReactElement项，并保留React。反应元素
-
我想只允许特定的组件作为孩子。例如，假设我有一个Menu组件，它应该只包含作为子组件，如下所示： 因此，当我尝试将另一个组件作为子组件时，我希望Typescript在IDE中抛出一个错误。有东西警告我，我应该只作为孩子使用。例如，在这种情况下： 此线程几乎类似，但不包括TypeScript解决方案。我想知道这个问题是否可以使用TypeScript类型和接口来解决。在我想象的世界中，它看起来是这样的
-
我有一个组件和一个组件，当有一个子组件不是组件时，我想抛出一个错误。这是可能的，还是我试图解决错误的问题？
-
我使用的是React路由器V4，我有此路由器的配置： 是可选的语言参数，它应该与模式匹配，例如、或不匹配。例如，应用程序利用这些路由： 另外，我还有一个额外的组件，在其中我定义了函数的路由： 因此，我希望实现的结果是，只接受允许的语言代码（和空参数），而不接受的代码将被重定向到组件。 可能吗？如何实现这一目标？ 非常感谢这个例子
-
告诉docker-compose哪些容器应由启动 从获取所有链接容器的输出
-
问题内容： 施玛 我在MySQL数据库中进行了以下设置： 问题 我需要选择： *具有该值的 *所有 项目都具有价值， 并且 *每个组中的 *一项以 最低的 价格确定。 预期成绩 可能的解决方案1： 两个查询 但是，不希望有两个查询，因为子句中的条件会更复杂，而且我需要对最终结果进行排序。 可能的解决方案2： 关于表达式（参考） 解决方案2似乎更快速，更易于使用，但是我想知道在性能方面是否有更好的方
-
问题内容： 可以说我有： 在Tabs组件内部，具有属性 儿童[0]（this.props.children）看起来像 儿童[0]。道具看起来像 最终，Children对象看起来像（这是我想要传递的）： 问题是这样，如果我这样重写MultiTab 在选项卡组件内部 看起来和上面一样。 好像 我希望该物业看起来像。上面只是打印出Statement函数。 这是一个很奇怪的问题，但是长话短说，我正在使用一