组件通信可以分为以下几种:

  • 父组件向子组件通信
  • 子组件向父组件通信
  • 跨级组件的通信及context
  • 没有嵌套关系的组件通信
父组件向子组件通信
 
父组件通过props向子组件传递需要的信息。
 
子组件向父组件通信

子组件调用porp中传来的父组件的方法达到通信的目的

跨级组件的通信

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context(“light”为默认值)。
const ThemeContext = React.createContext('light'); class App extends React.Component {
render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深,任何组件都能读取这个值。
// 在这个例子中,我们将 “dark” 作为当前的值传递下去。
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
} // 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
} class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider,然后使用它的值。
// 在这个例子中,当前的 theme 值为 “dark”。
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}

  

没有嵌套关系的组件通信

使用events库,收信方在componentDidMount里面注册监听事件,在componentUnMount里销毁该事件。发信方则使用emit方法即可发出通讯消息。(切记,有注册,就得有销毁)

// 使用示例
class List1 extends React.Component{
constructor(props) {
super(props)
this.state = {
text: 'list1'
}
}
render() {
return (
<div>{ this.state.text }</div>
)
}
componentDidMount() {
this.eventEmitter = ee.addListener('changeMessage', (msg) => {
this.setState({
text: msg
})
})
}
componentWillUnmount() {
ee.removeListener(this.eventEmitter)
}
}
class List2 extends React.Component{
handleClick(message) {
ee.emit('changeMessage', message)
}
render() {
return (
<button onClick={ this.handleClick.bind(this, '哈哈')}>点点点</button>
)
}
}

  

React/组件通信的更多相关文章

  1. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  2. react组件通信那些事儿

    父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...

  3. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  4. React组件通信技巧

    效果图 communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...

  5. React组件通信

    1.父子通信 父 -> 子 props子 -> 父 回调函数,父组件通过props向子组件传递一个函数,子组件调用函数,父组件在回调函数中用setState改变自身状态 2.跨层级通信 1 ...

  6. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  7. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  8. 【JAVASCRIPT】React学习- 数据流(组件通信)

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...

  9. 关于react组件之间的通信

    才开始学react刚好到组件通信这一块,就简单的记录下组件间的通信方式:父到子:props.context,子到父:自定义事件.回调,兄弟组件:共父props传递.自定义事件import React, ...

随机推荐

  1. 010-centos 端口问题

    1.nmap 安装 yum install nmap    #输入y安装 使用 nmap localhost    #查看主机当前开放的端口      nmap -p 1024-65535 local ...

  2. rf笔记

    1.使用robot 用例绝对路径 可执行用例 2.robot --h 可以查看命令用法 3. 创建字典 *** Settings *** Library         Collections *** ...

  3. 怎样修复社区项目Karbor的Bug?

    1.准备工作. 点击Settings按钮进行设置,跳转到 https://review.openstack.org/#/settings/ 2.选择用户名称. 这个选择之后不能修改. 3.设置http ...

  4. iOS 将一个UIImage缩放到指定Size

    这方法挺实用的,直接调用就可以得到想要的size. //将一个UIImage缩放变换到指定Size -(UIImage*) OriginImage:(UIImage *)image scaleToSi ...

  5. (十)会话跟踪技术之Session

    ---部分转自孤傲苍狼博客 一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此 ...

  6. iOS笔试题01

    1. #import 跟#include.@class有什么区别?#import<> 跟 #import”"又什么区别? 1> #import和#include都能完整地包 ...

  7. WordPress获取特色图像的链接地址

    为什么要获取WordPress的特色图像呢? 这主要是因为,我们已经写好了静态模板文件,只有获取WordPress特色图像地址插入进去就可以了,非常方便. 还有就是有的时候,我们需要设置图片的宽度为1 ...

  8. 整理Vue.js 面试题

    Vue.js 面试题整理   Vue项目结构介绍 build 文件夹:用于存放 webpack 相关配置和脚本. config 文件夹:主要存放配置文件,比如配置开发环境的端口号.开启热加载或开启gz ...

  9. [多转合成] 使用pycaffe保存各个层的特征图

    # coding=utf-8 #python2 caffe_visualize.py import numpy as np import matplotlib.pyplot as plt import ...

  10. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...