React（5）React兄弟组件之间的通信

前言

上一篇文章我们通过一个ToDoList案例，系统的讲解了React父子组件之间的通信。本篇文章我们依然通过一个实用的案例来为大家讲解React兄弟组件之间的通信。

一、兄弟组件之间的通信原理

React项目中的两个兄弟组件若要传递数据，则首先需要先将数据从一个兄弟组件传递给他们的公共父组件，然后再由这个公共父组件将数据传递给另一个兄弟组件。数据传递的原理如下图所示。

该案例为了实现兄弟组件之间的数据传递，我们将其划分为三个组件。

父组件：Color，用于调用两个子组件，并且显示最终的颜色代码。
子组件1：ColorBoard，用于显示颜色拾取器中展示具体颜色的div容器。
子组件2：ColorSelector，用于实现调整颜色的三个滑竿。

本案例中，三个滑竿的取值决定了最终的颜色代码和颜色展示。所以初始化的数据位于组件ColorSelector中，当滑竿发生变化时，三个滑竿的取值都要传递给父组件，父组件将其转换为颜色代码，再传递给子组件ColorBoard，子组件将其作用在用于展示颜色的div的背景颜色属性上。组件之间数据的传递方向如下图所示。

二、三个组件的基本结构

我们将组件划分好之后，先按照效果图将各个组件的元素位置书写好。

1、子组件ColorSelector的基本结构

class ColorSelector extends Component{
  constructor(props){
    super(props);
    this.state={
      colors:[255,255,255]
    }
  }
  render(){
    return (
      
        {
          this.state.colors.map((item,index)=>{
            return 
          })
        }
      
    )
  }
}

为了能够获取三个滑竿的最终数值，我们在state区设置了一个名为colors的数据，该数据是一个数组，共有三个数组元素，分别用来表示三个滑竿的最终数值。

滑竿也属于表单元数，和上一篇文章中使用文本框的方法是一样的。为滑竿添加value属性设置默认值，绑定onChange事件获取用户交互数据，在onChange事件中使用event.target.value得到最终的结果。所以上述代码中滑竿的部分最终变为下列格式。

return this.colorChange(event,index)} />

2、子组件ColorBoard的基本结构

class ColorBoard extends Component{
  render(){
    return (
      
        
      
    )
  }
}

ColorBoard组件只具备一个div容器，最终会接收父组件Color传递过来的颜色代码并通过style属性改变背景颜色。

3、父组件Color的基本结构

class Color extends Component{
  constructor(props) {
    super(props);
    this.state={
      color:'#FFFFFF'
    }
  }
  render(){
    return (
      
        
        颜色代码：{this.state.color}
        
      
    )
  }
}

父组件为了接受子组件ColorSelector传递过来的数组并最终转换为颜色代码，在其state区设置了一个名为color的数据。

三、ColorSelector向Color传递数据

由于滑竿在子组件ColorSelector中，所以我们要先进行子组件向父组件的数据传递。这时父组件要在调用子组件时设置一个自定义事件，并在子组件中滑竿的onChange事件中调用这个自定义事件。

父组件在调用ColorSelector子组件时设置的自定义事件如下所示。

子组件ColorSelector的滑竿onChange事件如下所示。

colorChange(event,index){
  const {onSelect}=this.props;
  let colors=[...this.state.colors];
  colors[index]=parseInt(event.target.value);
  this.setState({
    colors
  });
  onSelect(this.state.colors);
}

在该段代码中，首先把记录三个滑竿数据的数组colors解构为colors变量，并通过event.target.value获取索引值为index的滑竿的最终数据，通过索引值改变变量colors的数组元素取值，并最终将变量colors再复制给state数据colors。最后调用父组件的onSelect事件，并将state区的colors数组传给父组件的onSelect事件。

父组件中自定义事件onSelect触发时执行的函数如下所示。

colorSelect(colors){
  let temp='#' + colors.map(item=>{
    return item>15?item.toString(16):'0'+item.toString(16);
  }).join('');
  this.setState({
    color:temp.toUpperCase()
  })
}

父组件的onSelect事件接收到子组件ColorSelector传递的数组，将其遍历并将每个数组元素转换为16进制，最终变为表示颜色色代码的字符串。最后将这个字符串全部转换为大写，并赋值给父组件state区的color数据，这样既可以用于传递给子组件ColorBoard，也可以用于在页面上显示颜色代码。

四、Color向ColorBoard传递数据

接下来，父组件应该将接收到的颜色代码color传递给另一个子组件ColorBoard了，以用来在div容器中显示背景颜色。这时，父组件在调用子组件ColorBoard时，应该为其设置一个自定义属性，用来传递颜色代码。代码如下所示。

子组件ColorBoard应该获取父组件传递的颜色代码并通过style属性改变div容器的背景颜色。代码如下所示。

const {color}=this.props;
return (
  
    
  
)

至此，三个滑竿的数据完整的从子组件ColorSelector中传递给了另一个子组件ColorBoard，在父组件中转的过程中，将ColorSelector传来的数组转换为颜色代码传给ColorBoard。兄弟组件之间地通信顺利完成。

五、项目完整代码

const {Component,Fragment} = React;
/*子组件ColorBoard*/
class ColorBoard extends Component{
  render(){
    const {color}=this.props;
    return (
      
        
      
    )
  }
}
/*子组件ColorSelector*/
class ColorSelector extends Component{
  constructor(props){
    super(props);
    this.state={
      colors:[255,255,255]
    }
  }
  colorChange(event,index){
    const {onSelect}=this.props;
    let colors=[...this.state.colors];
    colors[index]=parseInt(event.target.value);
    this.setState({
      colors
    });
    onSelect(this.state.colors);
  }
  render(){
    return (
      
        {
          this.state.colors.map((item,index)=>{
            return this.colorChange(event,index)} />
          })
        }
      
    )
  }
}
/*父组件Color*/
class Color extends Component{
  constructor(props) {
    super(props);
      this.state={
        color:'#FFFFFF'
      }
  }
  colorSelect(colors){
    let temp='#' + colors.map(item=>{
      return item>15?item.toString(16):'0'+item.toString(16);
    }).join('');
    this.setState({
      color:temp.toUpperCase()
    })
  }
  render(){
    return (
      
        
        颜色代码：{this.state.color}
        
      
    )
  }
}

ReactDOM.render(
    ,
    document.getElementById('app')
);

总结

本文是React系列教程的第五篇文章，主要为大家讲解了React兄弟组件之间的通信方式。本质是依然是父子组件之间的通信。明天会为大家系统的讲解React中受控表单元素的使用方法。

关于作者

小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住Segmentfault，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。