React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:
- 父组件向子组件通信
- 子组件向父组件通信
- 非嵌套组件间通信
- 跨级组件之间通信
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 中组件间通信的几种方式的更多相关文章
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- vue-learning:31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...
随机推荐
- Day 02 - 02 编程语言的分类
编程语言的分类 机器语言分为: 1.机器语言 优点:执行代码效率非常快 缺点:开发效率低 2.汇编语言 优点(相对于机器语言):开发效率高 缺点(相对于机器语言):执行效率低 3.高级语言 解释型(同 ...
- W3c盒子模型+IE盒子模型+box-sizing属性
1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...
- RabbitMQ消息可靠性分析 - 简书
原文:RabbitMQ消息可靠性分析 - 简书 有很多人问过我这么一类问题:RabbitMQ如何确保消息可靠?很多时候,笔者的回答都是:说来话长的事情何来长话短说.的确,要确保消息可靠不只是单单几句就 ...
- Mysql学习总结(31)——MySql使用建议,尽量避免这些问题
做服务器端开发的同学们,相信对于mysql应该是十分熟悉,但是一旦真正出现问题,你是否能够快速的发现问题的起因,并且解决呢?一旦问题涉及到数据库层面,往往不是那么好解决的,通常来说,我们需要提前做应对 ...
- Nutch2 WebPage 字段解释
Nutch2 WebPage 字段解释 Nutch2.2.1 id
- 每天学点Python之comprehensions
每天学点Python之comprehensions 推导式能够简化对数据的处理,让代码简洁的同一时候还具有非常高的可读性.这在Python中非经常见. 列表推导式 通过列表推导式能够对列表中的全部元素 ...
- IMP-00010: 不是有效的导出文件,标题验证失败
IMP-00010: 不是有效的导出文件,标题验证失败 IMP-00000: 未成功终止导入 在google上查找了一下,大概有两种情况: 1.imp/exp的版本不对,也就是说低版本的导出,可以 ...
- vc应用CPictureEx类(重载CStatic类)加载gif动画
1.PictureEx.h文件: //////////////////////////////////////////////////////////////////////// PictureEx. ...
- [luogu P4197] Peaks 解题报告(在线:kruskal重构树+主席树 离线:主席树+线段树合并)
题目链接: https://www.luogu.org/problemnew/show/P4197 题目: 在Bytemountains有N座山峰,每座山峰有他的高度$h_i$.有些山峰之间有双向道路 ...
- 18.boost 图的拓扑排序
运行结果: 代码示例: #include <iostream> #include <vector> #include <deque> #include <bo ...