如何知道子组件的类型

在日常开发中，我们可能会遇到像 select 组件和 RadioGroup 组件的情况:

Select 组件

<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>
    Disabled
  </Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

Radio 组件

<Radio.Group onChange={this.onChange} value={this.state.value}>
  <Radio style={radioStyle} value={1}>
    Option A
  </Radio>
  <Radio style={radioStyle} value={2}>
    Option B
  </Radio>
</Radio.Group>

对于这种情况，Select 作为父组件，需要知道子组件的类型，它是不是 Option 组件，例如，我们只会对 Option 子组件添加特殊属性，如果是其它类型子组件则不作处理:

于是我们可以这样:

// B 组件
function B () {
  return <div>
  B
  </div>
}

class A extends React.Component {
  render () {
    // 在这里判断 type 是不是 B
    // 2020-03-28 新增, 有时候不能通过 type 直接判断时
    // 可以通过 children.type.name === 'B' 来判断
    console.log(this.props.children.type === B)
    return <div>
      {this.props.children}
    </div>
  }
}

function App () {
  return <div>
    <A>
      <B />
    </A>
  </div>
}

注意: 如果 this.props.children 是数组，则需要使用循环:

class A extends React.Component {
  render () {
    console.log(this.props.children.map(ele => {
      return ele.type === B
    }))
    return <div>
      {this.props.children}
    </div>
  }
}

同时，使用 type 这种方法，不仅可以用于函数式组件，对于 Class 组件也同样有效:

class B extends React.Component {
  render () {
    return <div>
      B
    </div>
  }
}