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

IT技术 javascript reactjs typescript
2021-05-15 23:25:11

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

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

predicate是一个函数,用于测试孩子的某些属性或其他什么。 我如何编写predicate以测试子元素是什么类型的元素?

在文章中,在 React 中将props发送给孩子,您会看到我在上面应用的相同模式,除了他的谓词函数看起来像child.type === RadioOption.type- 如果我想检查孩子继承自的类型,这将不起作用。

就我而言,我StatelessModal-child可能是扩展StatelessModal.

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

2个回答

我在控制台中玩耍并发现这是可行的:

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

虽然 a 的type属性ReactElement似乎没有记录,但这里有理由注意到,childis aReactElementchild.typeis a ComponentClass(您可能还会发现它可能是 astringStatelessComponent)—— ComponentClass 是定义组件的类;如果组件是通过继承创建的,则类原型链包括继承的类型,由instanceof

接受的答案根本不适合我。

我已经测试了几种检查儿童类型的方法。得出的结论是:

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

在开发和生产环境中为 react@16.7 和 react@16.8 中的类组件和功能组件工作。

https://github.com/dancerphil/react-children-type 中的更多测试用例

https://dancerphil.github.io/react-children-type/显示生产版本的结论。