React非嵌套组件通信
非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件
针对这种情况的组件通信,常用两种方式处理
利用二者共同父级组件的context对象进行通信
列表内容
自定义事件方式进行通信
第一种方式所使用的context对象类似一个全局变量,有可能会造成全局污染,官方也是推荐尽可能不使用.
下面说说第二种使用方式,其实也非常简单,类似angular中的服务依赖注入的方式.
这种方式需要使用用来自定义事件的event包,下面先安装
javascript 代码
npm install event -S
或者
yarn add event
组件结构: App组件为根组件,根组件里面有两个兄弟组件,Child1,Child2, 用于在Child1和Child2组件进行通信的Event服务.下面实现Child1组件与Child2组件之间的通信
Event.js(服务)
javascript 代码
import {EventEmitter} from 'events';
//这里并没有使用jsx的语法,所以不用导入React
export default new EventEmitter();
App组件
javascript 代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child1 from './views/Child1';
import Child2 from './views/Child2';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<Child1 />
<Child2 />
</div>
);
}
}
export default App;
Child1组件
javascript 代码
import React, {Component} from 'react';
import emitter from '../services/event';
class Child extends Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
emitter.emit('callMe', 'Hello');
}
render() {
return (
<button onClick={this.handleClick}>event click</button>
);
}
}
export default Child;
Child2组件
javascript 代码
import React, {Component} from 'react';
import emitter from '../services/event';
class Parent extends Component {
constructor() {
super();
}
componentDidMount() {
this.eventEmitter = emitter.addListener('callMe', (msg) => {
console.log(msg);
});
}
componentWillUnmount() {
emitter.removeListener(this.eventEmitter);
}
render() {
return (
<p>Parent Component</p>
);
}
}
export default Parent;
转载https://blog.csdn.net/roamingcode/article/details/81773673
相关文章
- 【UML建模】(8) UML建模之组件图
- 如何写出漂亮的React组件
- Semantic-UI的React实现(三):基本元素组件
- React Native组件生命周期
- 【C#】组件化开发,调用dll组件方法
- Yii 时间日期组件与composer 下载中出现的问题
- 【React】6、图文详解react组件生命周期——React v16.8
- react:受控组件与非受控组件
- react:组件之间的组合
- ZingGrid JavaScript Web 组件库,操作和格式化您的网格数据
- KendoReact Crack,面向 React UI 和 DataViz 组件
- EhLib.WinForms Crack,EhLib.WinForms组件
- React组件间的通信
- [译] 为多个品牌和应用构建 React 组件
- velocity #parse抽象重用部分组件
- 用react模仿知乎的用户头像裁剪组件
- 当初要是看了这篇,React高阶组件早会了。
- Vue 与 React 父子组件之间的关系
- React.js 中的组件通信问题
- React.js组件通信所有方法
- React源码分析5 -- 组件通信,refs,key,ReactDOM
- React native全局变量的使用(跨组件的通信)
- react-native制作新手引导组件
- React Native 封装原生UI组件并使用的流程(iOS)