检查组件是否是子映射中 React.ReactElement 的实例

我有一个循环遍历子组件并将它们包装在 div 中的组件。我正在尝试添加排除项，但遇到了一个问题，我无法检查孩子是否是ReactElement或不 （React.ReactChild可以是字符串或数字，因此它可能没有类型）。

尝试下面的方法，我收到：“'ReactElement'仅指一种类型，但在这里被用作值。”以及“类型‘ReactChild’上不存在属性‘类型’。”

任何为我指明正确方向的帮助将不胜感激。

  {React.Children.map(children, (child: React.ReactChild) => {
        /**
         * Exclude these components from being
         * wrapped by the item wrapper.
         */
        if (child instanceof React.ReactElement<any> && child.type === Divider) {
          return child;
        }

        if (child) {
          return <div className="l-spacer__item">{React.cloneElement(child as React.ReactElement<any>)}</div>;
        }

        return null;
      })}

child instanceof React.ReactElement<any>

无效，因为React.ReactElement不是一个值。它是一个接口。接口只是类型，与类不同，没有相应的值。所有类型都被删除。它们没有运行时表示。

此外，JavaScript 的instanceof使用，应该理解如下

value instanceof anotherValue

这使得来自语法相似的语言的人们与名称相似的运算符但其中右侧操作数是一种类型的人感到困惑。在 JavaScript 中，两个操作数始终都是值。

要执行您的特定检查，请将您的代码调整为以下内容：

if (typeof child !== 'string' && typeof child !== 'number' && child.type === Divider) {
  return child;
}

这是有效的，因为类型React.ReactChild定义为

React.ReactElement | React.ReactText;

and React.ReactText定义为

string | number

通过消除这些情况，语言知道它与第三个可能的联合情况匹配，React.ReactElement，其中有一个type财产。