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 (      
        
父子组件通信实例
        父传子              
    )  }} 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 (      
        
从父组件传过来：
        {this.state.msg}      
    )  }} 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 (      
        
父子组件通信实例
        {this.state.fromChildrn}              
    )  }} 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 (      
        
从父组件传过来：
        {this.state.msg}        子传父      
    )  }} export default Children

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

以上是"React如何实现父子组件通信"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！