当前在线人工客服
天达云-技术
QQ:1324027256
天达云-技术
QQ:1902643386
天达云-售前
QQ:1650874901
天达云-售前
QQ:2207995833
天达云-合作
QQ:1984186903
天达云微信小程序
400-837-6568

React如何实现父子组件通信
更新:HHH   时间:2023-1-7


这篇文章主要介绍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,如下

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

返回web开发教程...