在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:

  1. 父组件向子组件通信
  2. 子组件向父组件通信
  3. 非嵌套组件间通信
  4. 跨级组件之间通信

1.父组件向子组件通信
父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。
演示代码:
父组件 parent.js:


import React,{ Component } from "react"; export default class App extends Component{ render(){
return(
<div>
<Sub title = "111111" />
</div>
)
}
}
子组件 child.js:

import React from "react";

class Child extends React.component{


construtor(props){
super(props)
this.state = {}
}
render(){
return(
<h1>
{ props.title}
</h1>
)
}

}

export default Child;


**2.子组件向父组件通信**
利用回调函数,实现子组件向父组件通信:父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数.即可
演示代码:
child.js

import React from "react";

class Child extends React.component{


construtor(props){
super(props)
this.state = {}
}
cb = (msg) => {
return () => {
props.callback(msg);
}
}
render(){
return(
<div>
<button onClick = { this.cb("通信") }>点击我</button>
</div>
)
}

}

export default Child;


app.js

import React from "react";

export default class App extends React.Component{


callback(msg){
console.log(msg);
}
render(){
return(
<div>
<Sub callback = { this.callback.bind(this) } />
</div>
)
}

}


**3.非嵌套组件间通信**
非嵌套组件,就是没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件
首先需要引入一个包events

npm install events --save


新建ev.js文件,引入 events 包,并向外提供一个事件对象,供通信时使用

import { EventEmitter } from "events";
export default new EventEmitter();



app.js

import React, { Component } from 'react';

import childA from "./childA ";
import childB from "./childB";

export default class App extends Component{


render(){
return(
<div>
<childA />
<childB />
</div>
);
}

}


childA

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildA extends Component{


constructor(props) {
super(props);
this.state = {
msg:null,
};
}
componentDidMount(){
// 声明一个自定义事件
// 在组件装载完成以后
this.eventEmitter = emitter.addListener("callMe",(msg)=>{
this.setState({
msg
})
});
}
// 组件销毁前移除事件监听
componentWillUnmount(){
emitter.removeListener(this.eventEmitter);
}
render(){
return(
<div>
{ this.state.msg }
child a
</div>
);
}

}


childB:

import React,{ Component } from "react";
import emitter from "./ev"

export default class ChildB extends Component{


render(){
const cb = (msg) => {
return () => {
// 触发自定义事件
emitter.emit("callMe","test")
}
}
return(
<div>
childB
<button onClick = { cb("blue") }>点击</button>
</div>
);
}

}

原文地址:https://segmentfault.com/a/1190000016647850

React 中组件间通信的几种方式的更多相关文章

  1. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  2. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  3. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  4. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

  5. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  6. React Native组件间通信

    React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...

  7. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  8. vue-learning:31 - component - 组件间通信的6种方法

    vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...

  9. React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...

随机推荐

  1. Day 02 - 02 编程语言的分类

    编程语言的分类 机器语言分为: 1.机器语言 优点:执行代码效率非常快 缺点:开发效率低 2.汇编语言 优点(相对于机器语言):开发效率高 缺点(相对于机器语言):执行效率低 3.高级语言 解释型(同 ...

  2. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  3. RabbitMQ消息可靠性分析 - 简书

    原文:RabbitMQ消息可靠性分析 - 简书 有很多人问过我这么一类问题:RabbitMQ如何确保消息可靠?很多时候,笔者的回答都是:说来话长的事情何来长话短说.的确,要确保消息可靠不只是单单几句就 ...

  4. Mysql学习总结(31)——MySql使用建议,尽量避免这些问题

    做服务器端开发的同学们,相信对于mysql应该是十分熟悉,但是一旦真正出现问题,你是否能够快速的发现问题的起因,并且解决呢?一旦问题涉及到数据库层面,往往不是那么好解决的,通常来说,我们需要提前做应对 ...

  5. Nutch2 WebPage 字段解释

    Nutch2 WebPage 字段解释 Nutch2.2.1 id

  6. 每天学点Python之comprehensions

    每天学点Python之comprehensions 推导式能够简化对数据的处理,让代码简洁的同一时候还具有非常高的可读性.这在Python中非经常见. 列表推导式 通过列表推导式能够对列表中的全部元素 ...

  7. IMP-00010: 不是有效的导出文件,标题验证失败

    IMP-00010: 不是有效的导出文件,标题验证失败 IMP-00000: 未成功终止导入   在google上查找了一下,大概有两种情况: 1.imp/exp的版本不对,也就是说低版本的导出,可以 ...

  8. vc应用CPictureEx类(重载CStatic类)加载gif动画

    1.PictureEx.h文件: //////////////////////////////////////////////////////////////////////// PictureEx. ...

  9. [luogu P4197] Peaks 解题报告(在线:kruskal重构树+主席树 离线:主席树+线段树合并)

    题目链接: https://www.luogu.org/problemnew/show/P4197 题目: 在Bytemountains有N座山峰,每座山峰有他的高度$h_i$.有些山峰之间有双向道路 ...

  10. 18.boost 图的拓扑排序

    运行结果: 代码示例: #include <iostream> #include <vector> #include <deque> #include <bo ...