javascript - 循环 this.props.children 我如何测试他们的类型？

Question

在自定义 React 组件中的以下代码片段中

React.Children.map(this.props.children), (child) => {
    if (predicate(child)) {
        // do stuff
    }
    else {
        // do other stuff
    }
}

predicate 是一个函数，用于测试子项的某些属性或其他内容。 如何编写 predicate 来测试子元素是什么类型？

文章中，Send Props to Children in React你会看到我在上面应用的相同模式，除了他的谓词函数看起来像 child.type === RadioOption.type - 如果我想检查 child 拥有的类型，这不起作用继承自。

在我的例子中，我有 StatelessModal -- child 可能是扩展 StatelessModal 的几个不同组件之一。

当我知道 child 是扩展 StatelessModal 的 Modal 组件之一时，我发现 predicate = (child) => child instanceof StatelessModal 和 predicate = (child) => child.type instanceof StatelessModal 工作。

Answer 1

我在控制台中试了一下，发现这是可行的:

predicate = (child) => child.type.prototype instanceof StatelessModal

虽然 ReactElement 的 type 属性似乎没有记录，但这里有理由注意到，child 是一个 ReactElement，而 child.type 是一个 ComponentClass(您可能还会发现它可能是一个 string 或 StatelessComponent) -- ComponentClass 是定义组件的类；如果组件是通过继承创建的，则类原型(prototype)链包括由 instanceof 揭示的继承类型