react开发教程（八）React组件通信

kamushin233 发布于2019-08-21 11:51 / 844人阅读

摘要：父子组件通讯通讯手段这是最常见的通信方式，父组件只需要将子组件需要的传给子组件，子组件直接通过来使用。

父子组件通讯

通讯手段
这是最常见的通信方式，父组件只需要将子组件需要的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 = ();
        }
        return leftDOM;
    }
    

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

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

    render() {
        return (
            
                {this.renderLeftComponent()}
                {this.props.title || "滴滴"}
                {this.renderRightComponent()}
            
        );
    }
}

export default Header;

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

let leftIcon = function () {
  return (
    左边按钮
  )
}
class App extends Component {

  render() {
    return (
      
        
      
    );
  }
}

子父组件通讯

父-子组件通信的手段是通过子组件的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() {
        
            
        
    }
}


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

同级组件通信

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87200.html

react开发教程（九）redux基础

摘要：案例代码定义计算规则，即个商品价值恋人结算完成，当前购物车为空单身狗根据计算规则生成定义数据即变化之后的派发规则触发数据变化上一篇开发教程八组件通信下一篇开发教程十结合 Readux基础什么是redux？简单点回答就是，一个管理数据的全局对象，但是它有单一状态树的概念，所谓的单一状态树，就是指所有的 state都以一个对象树的形式储存在一个单一的 store 中。页面中的所有状...

muzhuyu 2019-08-21 17:53 评论0 收藏0
全栈 React + GraphQL 教程（一）

摘要：然而，尽管使用有诸多好处，但迈出第一步可能并不容易。为了简化初始教程，我们今天只构建一个简单的列表视图。是我们将在本教程系列中使用的客户端的名称。我们将列表组件命名为。在本教程的其余部分中，你将了解到我们构建一个真正的通信应用的基础。首发于众成翻译 Part 1——前端：使用 Apollo 声明式地请求和 mock 数据 showImg(http://p0.qhimg.com/t0...

luxixing 2019-08-21 17:01 评论0 收藏0
React Router 使用教程(阮一峰)

摘要：它是官方维护的，事实上也是唯一可选的路由库。表示的这个部分是可选的。另一种做法是，使用指定当前路由的。而组件会使用路径的精确匹配。否则用户直接向服务器请求某个子路由，会显示网页找不到的错误。真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 评论0 收藏0