react嵌套组件的通信

在react开发中，在某些场景会遇到如下组件嵌套形式的开发，比如说tab组件，下拉框组件等等

<RadioGroup>
    <RadioOption label="选项一" value="1" />
    <RadioOption label="选项二" value="2" />
</RadioGroup>

如果想把父组件中的属性传给所有的子组件，该怎么做呢？
如果子组件想调用父组件内部的方法，又该怎么做呢？

下面通过一个demo，来回答这俩个问题，不过在此之前需要理解以下一些概念

• this.props.children是React内建的一个属性，用来获取组件的子元素(注意：如果子元素为空，this.props.children为undefined，如果子元素有一个，this.props.children为Object，子元素有多个，this.props.children为Array，没错，就是这么坑，但别急，请看下一条)
• react提供React.Children来处理this.props.children，使用React.Children.map来遍历子节点，不用担心 this.props.children 的数据类型是 undefined 还是 object 还是 Array，方法内部已经做了处理，就是这么酷
• React.cloneElement克隆并返回一个新的 ReactElement （内部子元素也会跟着克隆），新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props（只要在第二个参数中有定义）。

回到demo，我们写一个radio选择的组件，将radio组合起来，这样就要求radio的name一致，父组件为RadioGroup，name属性在父组件中设置:

class RadioOption extends React.Component{
  render() {
        return (
        <label>
        <input type="radio" value={this.props.value} name={this.props.name}  onClick={()=>{this.props.showValue(this.props.value)}}/>
        {this.props.label}
      </label>
    );
  }
};

class RadioGroup extends React.Component{
//父组件方法
  showValue(val){
    console.log(val)
  }
  renderChildren(props) {
    //遍历所有子组件
    return React.Children.map(this.props.children, child => {
      if (child.type === RadioOption)
        return React.cloneElement(child, {
          //把父组件的props.name赋值给每个子组件（父组件传值给子组件）
          name: props.name,
          //父组件的方法挂载到props.showValue上，以便子组件内部通过props调用
          showValue:this.showValue
        })
      else
        return child
    })
  }
  render() {
    return(
        <div>
          {this.renderChildren(this.props)}
        </div>
    )
  }
};
 
ReactDOM.render(
  <RadioGroup name="option">
    <RadioOption label="选项一" value="1" />
    <RadioOption label="选项二" value="2" />
  </RadioGroup>,
    document.getElementById('container')
);

jsfiddle
代码略长，但是仔细看过及阅读注释后，你会对开头提的两个问题豁然开朗。
总结下，其实万变不离其宗，通过React.cloneElement给子元素添加props属性，由于此方法运行在父元素的作用域中，所以可以获取父元素的属性和方法，以此达成通信的目的。