效果图

communication.gif

点击查看Github完整源码

1.父向子通信

  • 直接标签中插入参数即可
//number只是个例子
let _number = this.state.number
<Child number={_number} />

需要注意,_number 可以为普通参数、this.xxx 参数、也可以是 this.state.xxx 参数,其中this.state.xxx参数若发生改变,会导致 Child 重新渲染

2.子向父通信

  • 需要从 Parent 处接一个绑定了父组件的函数,然后在 Child 内部调用修改父的相关参数,达到效果
//从父组件接函数
childToParent() {
let _backNumber = this.state.backNumber
this.setState({
backNumber: _backNumber + 1
})
} let _childToParent = this.childToParent.bind(this) <Brother childToParent={_childToParent} />
<div>{'子向父通信:' + _backNumber}</div> //子组件触发函数
let _childToParent = this.childToParent.bind(this) <button onClick={_childToParent}>子向父通信</button>

同样,可以修改父组件的 this.state.xxx( this.setState() 触发渲染),也可以修改this.xxx等值

3.通用组件通信方式(包括兄弟组件)

  • 理论上,掌握了子向父通信与父向子通信,可以处理兄弟组件通信,但是如果层级过深,这种方式极度麻烦

  • 建议使用 Event 对象处理嵌套层级过深的组件通信(当然包括兄弟组件通信)

//建议将Event相关单独封装模块使用
//event.js
export var events = {
ctc: 'ctc',
ctp: 'ctp',
ptc: 'ptc',
bts: 'bts',
stb: 'stb'
} export var sendEvent = (eventName, params) => {
var event = new Event(eventName)
event.params = params
document.dispatchEvent(event)
} export var catchEvent = (eventName, callback) => {
document.addEventListener(eventName, e => callback(e))
} export var removeCatch = (eventName, callback) => {
document.removeEventListener(eventName, callback)
} //brother.js 发送组件
import {events, sendEvent} from './event'
<button onClick={_brotherToSister}>Brother向Sister通信</button> brotherToSister() {
let _obj = {
message: 'brother to sister'
}
sendEvent(events.bts, _obj)
} //sister.js 接收组件
import {events, catchEvent} from './event' constructor() {
super()
this.state = {
message: ''
} //防止多次引用
this._brotherToSister = this.brotherToSister.bind(this)
} componentDidMount() {
catchEvent(events.bts, this._brotherToSister)
//会造成多次引用
// catchEvent(events.bts, this.brotherToSister.bind(this))
} componentWillUnmount() {
removeCatch(event.bts, this._brotherToSister)
} brotherToSister(e) {
this.setState({
message: e.params.message
})
} <div>
{'message: ' + _message}
</div>

点击查看Github完整源码

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组件设计技巧

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  5. React/组件通信

    组件通信可以分为以下几种: 父组件向子组件通信 子组件向父组件通信 跨级组件的通信及context 没有嵌套关系的组件通信 父组件向子组件通信   父组件通过props向子组件传递需要的信息.   子 ...

  6. React组件通信

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

  7. 你不知道的React Developer Tools,20 分钟带你掌握 9 个 React 组件调试技巧

    壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件,可以毫不夸张的说,它在我们日常组件开发中,对于组件属性以及文件定位,props 排查等等场景都扮演者至关重 ...

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

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

  9. React之组件通信

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

随机推荐

  1. JMeter高并发场景下存在请求无数据

  2. win10系统桌面快捷键图标异常解决方法

    win10系统桌面快捷键图标异常解决方法 前言: 有一次我的一个图标变成白色,找到:https://jingyan.baidu.com/article/948f5924148e67d80ef5f947 ...

  3. ZooKeeper用途

    ZooKeeper还可以用作其他用途,例如: 数据发布与订阅(配置中心) 负载均衡 命名服务(Naming Service) 分布式通知/协调 集群管理与Master选举 分布式锁 分布式队列 一些在 ...

  4. Spring 实现两种设计模式:工厂模式和单态模式(单例模式)

    本文摘自:李刚 著 <轻量级 Java EE企业应用实战 Struts2+Spring+hibernate整合开发> 在Spring 中大量使用的以下两种设计模式:工厂模式和单态模式. 工 ...

  5. JSP页面分页显示数据

    效果如上图所示!最多显示10条:完整jsp和后台代码如下: <%@ page contentType="text/html;charset=UTF-8" %> < ...

  6. DDoS攻击与防御(1)

    分布式拒绝服务攻击的精髓是,利用分布式的客户端,向服务提供者发起大量看似合法的请求,消耗或长期占用大量资源,从而达到拒绝服务的目的.从不同的角度看,分布式拒绝服务攻击的方法有不同的分类标准.依据消耗目 ...

  7. TF之RNN:TF的RNN中的常用的两种定义scope的方式get_variable和Variable—Jason niu

    # tensorflow中的两种定义scope(命名变量)的方式tf.get_variable和tf.Variable.Tensorflow当中有两种途径生成变量 variable import te ...

  8. ♣eclipse护眼颜色和关键字颜色设置

    eclipse护眼颜色和字体大小设置   ♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Wi ...

  9. hdu 1263 水果 【二维map】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 题目大意: Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ ...

  10. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...