react 组件中确定是否含有某个特定的子组件

Question

react 组件中确定是否含有某个特定的子组件

最近在写一个组件，但是需要知道这个组件里面是否含有特定的子组件，目前找到的一种方法是使用组件的type.name的方式进行判断，想问一下有没有更好的方式进行判断

相关代码

 // 父组件
    class Layout extends Component {
    
        static propTypes = {
            accordion: PropTypes.bool,
        }
    
        static defaultProps = {
            accordion: false,
        }
    
        // 判断是否含有Sider子组件
        judeSider = () => {
            let hasSider = false
            React.Children.forEach(this.props.children, (child) => {
                if (child.type.name === 'Sider') { //这里使用child的type.name进行判断
                    hasSider = true
                }
            })
            return hasSider
        }
    
        render() {
            const hasSider = this.judeSider()
            return <div className={hasSider ? styles.layoutHasSider : styles.layout}>{this.props.children}</div>
        }
    }
    
    // 子组件
    class Sider extends Component {
    
    static propTypes = {
        collapsible: PropTypes.bool,
        collapsed: PropTypes.bool,
        width: PropTypes.string
    }
    
    static defaultProps = {
        collapsible: false,
        collapsed: false,
        width: '200px'
    }
    
    render() {
        const { className, children, style, width, collapsible, collapsed, ...others } = this.props
        const cls = classNames(className, styles.sider, {
            [styles.collapsible]: collapsible,
            [styles.collapsed]: collapsed
        })
        const realStyle = collapsed ? {...style, width:'0px'} : {...style, width: width}
        return <div
            className={cls}
            style={realStyle}
            {...others}
        >
            {children}
        </div>
    }
}

如果有哪位前辈知道的话麻烦告知一下，感激不尽！

Answer 1

child.type === Sider

即ReactElementInstance.type = ReactComponent，React元素的type属性即是对应的React组件。

字符串可能重复，但是class不会