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 相关文章推荐
javascript标签在页面中的位置探讨
Apr 11 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
js获取form的方法
May 06 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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
php时区转换转换函数
2014/01/07 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Smarty模板配置实例简析
2019/07/20 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Python基于内置函数type创建新类型
2020/10/22 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
小松树教学反思
2014/02/11 职场文书
辅导员评语
2014/05/04 职场文书
项目投资合作意向书
2014/07/29 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014年学校工作总结
2014/11/20 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
承诺函范文
2015/01/21 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
企业团队精神心得体会
2016/01/19 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server