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}

注意：子组件取值时应与父组件放在子组件的字段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}

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} 子传父

大橙子网站建设，新征程启航

React如何实现父子组件通信

父子组件通信

其他资讯