react兄弟组件父子组件间该如何通信
当我们的项目不是太大时，组件间的数据流通不会很复杂时，也许我们不会选择使用redux之类的方式来进行组件间的通信，而会使用用纯粹的react来进行组件间的交流。下面我们就来谈谈在只使用react的情况下，如何进行组件间通信。
工具/原料
一个react项目
总的流程
1、总的流程这里，我们先来谈谈在仅仅使用react的情况下，组件间通信的流程1.父组件传递消息到子组件2.子组件传递消息到父组件3.兄弟组件间的消息传递
1. 父组件传递消息到子组件
1、父组件传递消息到子组件一般情况为：父组件中使用了子组件，然后子组件的props属性被父组件的state赋值，这样，我们在子组件中使用this.props就能获取到父组件用来赋值的state,也就获取到了父组件要传递的信息。
2、举例说明我现在创建一个父组件Parents创建两个子组件：Children1，Children2然后瓴烊椹舟将Children1，Children2嵌套进入Parents中，然后渲染Parents--------------------------------------------------------------Children1代码如下：import React, { Component } from 'react';let Children1_css = { border: '5px solid blue',}class Children1 extends Component { render() { return ( <div style={ Children1_css }> <h1>我是子组件 Children1</h1> <h1>父组件传来的值为：{ this.props.f1 }</h1> </div> ); }}export default Children1;-----------------------------------------------------------------Children2 代码如下：import React, { Component } from 'react';let Children2_css = { border: '5px solid yellow',}class Children2 extends Component { render() { return ( <div style={ Children2_css }> <h1>我是子组件 Children2</h1> <h1>父组件传来的值为:{ this.props.f2 }</h1> </div> ); }}export default Children2;------------------------------------------------------------Parents代码如下：import React, { Component } from 'react';import Children1 from './Children1'import Children2 from './Children2'let Parents_css = { border: '10px solid red',}class Parents extends Component { constructor(props) { super(props); //初始化state this.state = { v1: "我是父组件中的v1", v2: "我是父组件中的v2", } } render() { return ( <div> <h1>我是父组件 Parents</h1> <div style={ Parents_css }> <Children1 f1={ this.state.v1 } /> <Children2 f2={ this.state.v2 } /> </div> </div> ); }}export default Parents;-----------------------------------------------------渲染代码如下import React from 'react';import ReactDOM from 'react-dom';import Parents from './reactSendMessage/Parents';ReactDOM.render(<Parents />, document.getElementById('root'));
3、解释：我在父组件中使用两个孩子组件时，分别给两个孩子组件赋值了属性f1,f2,并且这两个属性的值为父组件中的state中的v1,v2.然后我在两个孩子组件中通过this.props.f1,this.props.f2的方式，得到父组件传递过来的值。从而达到父组件向子组件通信的目的浏览器运行结果如下：
2. 子组件传递消息到父组件
1、父向子通信我们已经知道了，那么子到父怎么通信呢？子组件如果要传递信息到父组件里那该怎么办呢？其实形式差不多，仍然是先父组件向子组件的props赋值，然后子组件中再通过this.props获取到父组件传递过来的值，唯一不同的是，此时父组件传递到子组件中的不再是像v1,v2那样的常量值，而是一个函数，一个专用于通信的函数。并且这个函数是属于父组件的，而不是属于父组件的state的，这个函数由于是定义在父组件里面，所以可以直接通过他对父组件的state进行操作，但是偏偏它又被赋值给了子组件的props,由子组件来调用，换句话说这个函数就充当了一个父子间的沟通桥梁，【它由父组件定义，由子组件使用，子组件想要传递任何消息都可以通过这个函数来告诉父组件，父组件接收后，做出相应的响应】此时也就意味着，如果子组件想要发一个消息到父组件，只需要调用下这个函数，传递一个参数，父组件就能知道了，并响应子组件请求。
2、代码实例我在父组件中定义一个函数，changeTitle，它接收一个参数，用来设置父组件的标题。然后赋值给子组件Children1的fn属性（注意：在es6语法中，给子组件属性赋值时，父组件函数一定要绑定父组件的this对象，否则子组件在调用此函数时会报错），然后子组件通过this.props调用此函数，来与父组件通信【子组件此时给此参数设置任意值，父组件的标题就会被修改为相应值。】父组件Parents代码import React, { Component } from 'react';import Children1 from './Children1'import Children2 from './Children2'let Parents_css = { border: '10px solid red',}class Parents extends Component { constructor(props) { super(props); //初始化state this.state = { title: "我是父组件 Parents", v1: "我是父组件中的v1", v2: "我是父组件中的v2", } } changeTitle(titlev) { // alert("点我改变标题"); this.setState({ title: titlev, }); } render() { return ( <div> <h1>{ this.state.title }</h1> <div style={ Parents_css }> <Children1 f1={ this.state.v1 } fn={ this.changeTitle.bind(this) } /> <Children2 f2={ this.state.v2 } /> </div> </div> ); }}export default Parents;---------------------------------------------------子组件Children1代码import React, { Component } from 'react';let Children1_css = { border: '5px solid blue',}class Children1 extends Component { click() { this.props.fn("我是子组件设置的标题，666666"); //在点击事件里面调用父组件传递来的通信函数，可以发出让父组件修改自己标题的信息 } render() { return ( <div style={ Children1_css }> <h1>我是子组件 Children1</h1> <h1>父组件传来的值为：{ this.props.f1 }</h1> <button onClick={ this.click.bind(this) }> {注释：这里绑定点击事件} 点击我能修改父组件的标题哦 </button> </div> ); }}export default Children1;----------------------------------------
3、运行结果如下
4、注意事项：在子组件向父组件传值的过程中，要注意的几点我再提一下1.现在大家基本都是使用的es6语法，而es6语法中，我们将父组件的函数赋值给子组件时，一定要记住绑定到父组件的this对象中，否则会报错。【这里提一句，通过箭头函数的方式也可以达到绑定this的目的，有兴趣可以自己研究下】2.子组件使用父组件传递来的函数通信时，一定不要直接将此函数属性绑定在子组件的onClick中，而是应该让子组件的onclick绑定函数a.然后在函数a中调用父组件传递来的函数属性。
3. 兄弟组件间的消息传递
1、在纯react中，兄弟组件间无法直接传值，需要通过父组件进行中转。换句话说，兄弟组件传值的流程是：子组件1---》父组件---》子组件2【其中子组件1和2是兄弟组件】这样兄弟组件就达到了通信的目的。
2、现在我来进行代码示例其实这个非常简单，刚刚我是用的子组件1来向父组件直接通信的，然后父组件接收到了子组件1的信息，做出响应修改自己的标题，现在我们只需要改变下就可以了，当父组件接钝鸵捎貌收到消息后，不是去修改自己的标题，而是去修改子组件2的内容，也就是子组件1发出一个消息后，子组件1就修改了，（兄弟间的通信）父组件代码：import React, { Component } from 'react';import Children1 from './Children1'import Children2 from './Children2'let Parents_css = { border: '10px solid red',}class Parents extends Component { constructor(props) { super(props); //初始化state this.state = { title: "我是父组件 Parents", v1: "我是父组件中的v1", v2: "我是父组件中的v2", } } change_xiongdi_Title(v2_titlev = "默认值") { // 改变兄弟title this.setState({ v2: v2_titlev, }); } render() { return ( <div> <h1>{ this.state.title }</h1> <div style={ Parents_css }> <Children1 f1={ this.state.v1 } fn={ this.change_xiongdi_Title.bind(this) } /> <Children2 f2={ this.state.v2 } /> </div> </div> ); }}export default Parents;------------------------------------------------------------------------
3、在浏览器里面的运行效果如下
回顾
1、在仅仅使用react的情况下，组件间通信总的流程为1.父组件传递消息到子组件，通过：父-----（state）------》子props2.子组件传递茇坍酮踪消息到父组件, 通过：父------（function）---》子props-------(调用此函数)-------》父3.兄弟组件间的消息传递，通过：父------（function）---》子props----》父------》另一个子ok,看到没，一层一层是存在依赖关系的，必须要先父传子，才能子传父。然后能够子传父，才能子传子（兄弟间通信），并且每一个流程都是接着上一个流程在增加些内容就是了。（在这种通信模式下是这样的）注意下：我们这里说的父子，并不像面向对象语言（如java,c#）那样存在继承关系，react中，子组件与父组件并不存在继承关系，子组件没有继承父组件，子组件中不包含父组件里面的属性方法等。子组件只是父组件的一个组成部分。
2、最后，如果你想简单的了解下用react开发的整个流程的话，（从无到有最后部署到服务器，然后发布，然后运营），可以去阅读我前面写的一篇文章