简单常用技巧之React组件间通信（整理分享）

本篇文章给大家带来了React组件间通信简单易用的常用方式，React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏，希望对大家有帮助。

一、父子组件通信

原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。

首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。

Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传props。

import React from 'react';import { Button } from 'element-react';import Children from './Children'; class Parent extends React.Component {  constructor(props) {    super(props);    this.state = {        msg:'父组件传递给子组件'    };    this.changeMsg = this.changeMsg.bind(this)  }  changeMsg(){    this.setState({      msg:'父组件传递给子组件（改变之后的内容）'    })  }  render(){    return (      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>        <p>父子组件通信实例</p>        <Button onClick={this.changeMsg}>父传子</Button>        <Children toChildren={this.state.msg}></Children>      </div>    )  }} export default Parent

Children.js子组件如下，初始状态通过props拿到父组件传过来的值。

import React from 'react'; class Children extends React.Component {  constructor(props) {    super(props);    this.state = {        msg:this.props.toChildren   //通过props拿到父组件传过来的值    };  }  render(){    return (      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>        <p>从父组件传过来：</p>        <span style={{color:'blue'}}>{this.state.msg}</span>      </div>    )  }} export default Children

注意：子组件取值时应与父组件放在子组件的字段props一致，即本例中的 toChildren，如下

那么子组件想向父组件传值（向上传值），可以通过调用父组件传过来的回调函数

在Parent.js中向Children.js中加入回调函数callback，绑定changeMsg方法

import React from 'react';import Children from './Children'; class Parent extends React.Component {  constructor(props) {    super(props);    this.state = {        msg:'父组件传递给子组件',        fromChildrn:''    };    this.changeMsg = this.changeMsg.bind(this)  }  changeMsg(val){    this.setState({      fromChildrn: val    })  }  render(){    return (      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>        <p>父子组件通信实例</p>        <span style={{color:'red'}}>{this.state.fromChildrn}</span>        <Children toChildren={this.state.msg} callback={this.changeMsg}></Children>      </div>    )  }} export default Parent

在子组件中，用this.props.callback()执行父组件的回调函数，从而执行绑定方法changeMsg，显示子组件传过来的值

import React from 'react';import { Button } from 'element-react'; class Children extends React.Component {  constructor(props) {    super(props);    this.state = {        msg:this.props.toChildren    };    this.toParent = this.toParent.bind(this)  }  toParent(){    this.props.callback('子组件传过来的值')   //子组件通过此触发父组件的回调方法  }  render(){    return (      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>        <p>从父组件传过来：</p>        <span style={{color:'blue'}}>{this.state.msg}</span>        <Button onClick={this.toParent}>子传父</Button>      </div>    )  }} export default Children

注意：props中的回调函数名称需一致，即本例中的callback，如下

小结： 以上为直接父子组件通信的其中一种方式，父传子，通过props；子传父，执行回调。

二、跨级组件通信

假设一个父组件中存在一个子组件，这个子组件中又存在一个子组件，暂且