react 通过props.children找到指定的子组件

使用场景：react 父组件Parent包含多个子组件，比如（A，B）组件，当Parent组件内有A组件时，Parent组件背景变成红色，否则为绿色

核心点：通过React组件的type属性（即React元素）判断

export default class Parent extends Component{
	state={
    	isRed:false
    }
    componentWillMount(){
        const {children} = this.props
        const {isRed} = this.state
        const aim = Array.isArray(children) ?  children : [children]
        aim.map((item)=>{
            if(item.type && item.type.name === 'A' && !isRed){
                this.setState({
                    isRed:true
                })
            }
        })
    }
	render(){
    	const {children} = this.props
        const {isRed} = this.state
        const aim = Array.isArray(children) ?  children : [children]
    	return (
        	<div style={{background:isRed ? 'red' :'green'}}>
              {
                  aim.map((item,index)=>{
                      return <React.Fragment key={index}>{item}</React.Fragment>
                  })
              }
            </div>
        )
    }
}
//注意为类组件，类组件才有type属性
Parent.A = class A extends Component{
	render(){
    	return (
        	<div>{this.props.children}</div>
        )
    }
}

Parent.B = ({
	children
})=>{
	return (
    	<div>{children}</div>
    )
}

调用部分

<Parent>
	<A>这里会是红色背景</A>
	<B>这里会是红色背景</B>
</Parent>

<Parent>
	<B>这里会是绿色背景</B>
	<B>这里会是绿色背景</B>
</Parent>