react开发教程之React 组件之间的通信方式


Posted in Javascript onAugust 12, 2017

这两天学习了React感觉组件通信这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

父子组件通讯

通讯手段

这是最常见的通信方式,父组件只需要将子组件需要的props传给子组件,子组件直接通过this.props来使用。

通讯内容

更多要提的是如何合理的设置子组件的props,要想将子组件设计成一个复用性强的通用组件,需要将能够复用的部分抽象出来,抽象出来的props有两种形成,一种是简单的变量,另一种是抽象出来处理某种逻辑函数。

以Header 组件为例

react开发教程之React 组件之间的通信方式

//HeaderBar.jsx 子组件

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }
  

  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("返回上一页")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        <span>{this.props.title || '滴滴'}</span>
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class App extends Component {

 render() {
  return (
   <div className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </div>
  );
 }
}

子父组件通讯

父-子组件通信的手段是通过子组件的props是子组件用父组件的东西,子-父组件通信,是父组件用子组件的东西,暂时了解的两种方法

利用回调函数

父组件通过props传递一个方法给子组件,子组件通过props方法将子组件数据传递给父组件

利用ref

父组件通过refs调用子组件的属性

跨级组件通信

在React中当一个属性反复使用并且存在与好几个子组件中的时候,这个时候我们如果通过props一级一级传递的话可以实现多层级访问,但是这样出现一个问题就是会使代码非常混乱,在React中国年,我们还可以使用 context 来实现跨级父子组件间的通信;

在react中context称为虫洞

// Component 父级
class parentComponent extends React.Component {
  
  // add the following property
  static childContextTypes = {
    color: React.PropTypes.string
  }
  
  // 添加下面方法
  getChildContext() {
    return {
      color: "#f00"
    }
  }
  
  render() {
    <div>
      <Child1 />
    </div>
  }
}


// Component Child1
class Child1 extends React.Component {
  // 添加下面属性
  static contextTypes = {
    color: React.PropTypes.string
  }
  
  render() {
    <div>{this.context.color}</div>
  }
}

同级组件通信

同级组件之间的通信还是需要通过父组件作为中介,利用多次父-子组件通信,项目中将需要传递的数据放在了父组件的state中,变动时可以自动的同步传递。

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

Javascript 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
JS面向对象编程浅析
Aug 28 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 #Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 #Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 #Javascript
js模块加载方式浅析
Aug 12 #Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
You might like
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
浅析Node.js非对称加密方法
2018/01/29 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
keras得到每层的系数方式
2020/06/15 Python
python 高阶函数简单介绍
2021/02/19 Python
Python 求向量的余弦值操作
2021/03/04 Python
PHP如何防止SQL注入
2014/05/03 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
物流经理自我评价
2013/09/23 职场文书
介绍信的格式
2015/01/30 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
python中的random模块和相关函数详解
2022/04/22 Python