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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue2路由基本用法实例分析
Mar 06 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
Home Coffee Roasting
2021/03/03 咖啡文化
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Golang与python线程详解及简单实例
2017/04/27 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python中文编码知识点
2019/02/18 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
AOP的定义以及作用
2013/09/08 面试题
红色旅游心得体会
2014/09/03 职场文书
计划生育证明格式范本
2014/09/12 职场文书
初三毕业评语
2014/12/26 职场文书
交通事故被告代理词
2015/05/23 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers