React 父子组件通信的实现方法


Posted in Javascript onDecember 05, 2019

通讯是单向的,数据必须是由一方传到另一方。

1.父组件与子组件间的通信。

在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。

父组件 App.js

import React, { Component } from 'react';

import './App.css';

import Child from './child'

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      msg:'父类的消息',
      name:'John',
      age:99
    }
  }

  callback=(msg,name,age)=>{
    // setState方法,修改msg的值,值是由child里面传过来的
    this.setState({msg});
    this.setState({name});
    this.setState({age});
  }

 render() {
  return (
   <div className="App">
    <p> Message:   {this.state.msg}</p>
    <Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>
   </div>
  );
 }
}

export default App;

父组件中,state里面有三个属性,分别是msg,name和age,在子组件child中,如果想拿到父组件里面的属性,就需要通过props传递。

在 <Child></Child> 标签里面添加

name={this.state.name} age={this.state.age}

写成

<Child name={this.state.name} age={this.state.age}></Child>

name和age分别是你要传递的属性。

子组件   Child

import React from "react";

class Child extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:'Andy',
      age:31,
      msg:"来自子类的消息"
    }
  }

  change=()=>{
    this.props.callback(this.state.msg,this.state.name,this.state.age);
  }

  render(){
    return(
      <div>
        <div>{this.props.name}</div>
        <div>{this.props.age}</div>
        <button onClick={this.change}>点击</button>
      </div>
    )
  }
}

export default Child;

在子组件中,通过 {this.props.name}  {this.props.age}就能拿到父组件里面的数据。

React 父子组件通信的实现方法

呈现在页面上的就是这个样子。

其中 John,99均来自于父组件App.js

2.子组件向父组件通信

子组件向父组件通讯,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的,是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。

上面例子中,在子组件Child中绑定了onClick事件。 调用this.change方法。

注意change函数采用了箭头函数的写法 change=()=>{},目的是为了改变this的指向。使得在函数单独调用的时候,函数内部的this依然指向child组件

如果不使用箭头函数,而是采用普通的写法

change(){
}

则需要在 constructor中绑定this,

this.change=this.change.bind(this)

或者在onClick方法中绑定this,

onClick={this.change=this.change.bind(this)}

在change方法中,通过props发送出去一个方法,比如说叫callback方法,父组件中去接收这个方法,callback={this.callback},然后在自身的callback函数中进行一些列操作。

本例中,函数callback中就是通过调用 setState方法来改变值。

点击按钮后页面显示:

React 父子组件通信的实现方法

可以看到,我们既实现了通过props将父组件里面的数据传递给子组件的效果,也实现了通过子组件按钮点击事件,将子组件里面的数据发送给父组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP自定义错误用法示例
2016/09/28 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python的id()函数解密过程
2012/12/25 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python装饰器用法示例小结
2018/02/11 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
给老婆的婚前保证书
2014/02/01 职场文书
土地转让协议书范本
2014/04/15 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
夫妻吵架保证书
2015/05/08 职场文书