文章目录

前言
一、兄弟组件之间的通信原理
二、三个组件的基本结构
- 1、子组件ColorSelector的基本结构
- 2、子组件ColorBoard的基本结构
- 3、父组件Color的基本结构
三、ColorSelector向Color传递数据
四、Color向ColorBoard传递数据
五、项目完整代码
总结
关于作者

前言

上一篇文章我们通过一个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中受控表单元素的使用方法。

第一讲初识React框架

第二讲认识JSX语法格式

第三讲 React组件

第四讲 React 父子组件之间的通信

关于作者

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

React（5）React兄弟组件之间的通信相关推荐

兄弟组件之间如何通信
在工作中有些情景.兄弟之间的通信,可能用vuex 并不方便,所以需要一个中间介质传递一下. Vue 实例实现了一个事件分发接口. 请直接看代码,在初始化web app的时候,给data添加一个名字为 ...
vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
vuejs兄弟组件之间的通信
var Event = new Vue();//准备一个空的实例对象 //A组件 var A = {template: `<div><span>我是A组件的数据->pw_ ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
vue项目笔记（17）-兄弟组件之间的联动
兄弟组件之间的联动在本节中,我们将要实现点击右侧的Alphabet,左侧List组件可以移动到指定的位置,实现兄弟组件之间的通信,我们可以借助它们公共的父组件实现转发.具体步骤如下: 1.步骤一:兄 ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...

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