前言

上一篇文章咱们通过一个ToDoList案例，零碎的解说了React父子组件之间的通信。本篇文章咱们仍然通过一个实用的案例来为大家解说React兄弟组件之间的通信。

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

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

咱们通过一个案例来阐明兄弟组件之间的通信形式。该案例是一个色彩调色板，页面中有三个滑竿，别离能够调整红色、绿色、蓝色的取值范畴（0-255），在调整任意滑竿的过程中，会主动显示最终生成的颜色代码，并将具体的色彩展现在一个div容器中。案例效果图如下图所示。

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

  • 父组件：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 (      <Fragment>        {          this.state.colors.map((item,index)=>{            return <input type="range" key={index} min={0} max={255} />          })        }      </Fragment>    )  }}

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

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

return <input type="range" key={index} min={0} max={255} value={item} onChange={()=>this.colorChange(event,index)} />

2、子组件ColorBoard的根本构造

class ColorBoard extends Component{  render(){    return (      <Fragment>        <div className="board"></div>      </Fragment>    )  }}

ColorBoard组件只具备一个div容器，最终会接管父组件Color传递过去的颜色代码并通过style属性扭转背景色彩。

3、父组件Color的根本构造

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

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

三、ColorSelector向Color传递数据

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

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

<ColorSelector onSelect={this.colorSelect.bind(this)}/>

子组件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 color={this.state.color}/>

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

const {color}=this.props;return (  <Fragment>    <div className="board" style={{backgroundColor:color}}></div>  </Fragment>)

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

五、我的项目残缺代码

const {Component,Fragment} = React;/*子组件ColorBoard*/class ColorBoard extends Component{  render(){    const {color}=this.props;    return (      <Fragment>        <div className="board" style={{backgroundColor:color}}></div>      </Fragment>    )  }}/*子组件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 (      <Fragment>        {          this.state.colors.map((item,index)=>{            return <input type="range" key={index} min={0} max={255} value={item} onChange={()=>this.colorChange(event,index)} />          })        }      </Fragment>    )  }}/*父组件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 (      <Fragment>        <ColorBoard color={this.state.color}/>        <div>颜色代码：{this.state.color}</div>        <ColorSelector onSelect={this.colorSelect.bind(this)}/>      </Fragment>    )  }}ReactDOM.render(    <Color></Color>,    document.getElementById('app'));

总结

本文是React系列教程的第五篇文章，次要为大家解说了React兄弟组件之间的通信形式。实质是仍然是父子组件之间的通信。今天会为大家零碎的解说React中受控表单元素的应用办法。

对于作者

小海前端，具备18年Web我的项目开发和前后台培训教训，在前端畛域著有较为零碎的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发畛域都有较为深的造诣。入住Segmentfault，心愿可能更多的结识Web开发畛域的同仁，将Web开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。