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

 更新时间:2017年08月12日 17:02:38   投稿:zx  
本篇文章主要介绍了react开发教程之React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

父子组件通讯

通讯手段

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

通讯内容

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

以Header 组件为例

//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的React框架中的JSX语法学习入门教程

    JavaScript的React框架中的JSX语法学习入门教程

    这篇文章主要介绍了JavaScript的React框架中的JSX语法学习入门教程,React是由Facebook开发并开源的高人气js框架,需要的朋友可以参考下
    2016-03-03
  • Webpack 4.x搭建react开发环境的方法步骤

    Webpack 4.x搭建react开发环境的方法步骤

    这篇文章主要介绍了Webpack 4.x搭建react开发环境的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React/Redux应用使用Async/Await的方法

    React/Redux应用使用Async/Await的方法

    本篇文章主要介绍了React/Redux应用使用Async/Await的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • ReactiveCocoa代码实践之-UI组件的RAC信号操作

    ReactiveCocoa代码实践之-UI组件的RAC信号操作

    这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下
    2016-04-04
  • React创建组件的三种方式及其区别

    React创建组件的三种方式及其区别

    本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • React实现分页效果

    React实现分页效果

    这篇文章主要为大家详细介绍了React实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • react新版本生命周期钩子函数及用法详解

    react新版本生命周期钩子函数及用法详解

    这篇文章主要介绍了react新版本生命周期钩子函数及用法详解,本文通过示例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 浅谈React组件之性能优化

    浅谈React组件之性能优化

    这篇文章主要介绍了浅谈React组件之性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 使用react+redux实现计数器功能及遇到问题

    使用react+redux实现计数器功能及遇到问题

    使用redux管理数据,由于Store独立于组件,使得数据管理独立于组件,解决了组件之间传递数据困难的问题,非常好用,今天重点给大家介绍使用react+redux实现计数器功能及遇到问题,感兴趣的朋友参考下吧
    2021-06-06
  • 一百多行代码实现react拖拽hooks

    一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论