非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件
针对这种情况的组件通信,常用两种方式处理
- 利用二者共同父级组件的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;