非嵌套组件: 就是没有任何包含关系的组件, 包括兄弟组件以及不再同一个父级的非兄弟组件
针对这种情况的组件通信, 常用两种方式处理
[ol]
[li] 利用二者共同父级组件的 context 对象进行通信 [/li]
[li] 自定义事件方式进行通信 [/li]
[/ol]
第一种方式所使用的 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;
来源: http://www.qdfuns.com/article/23231/af08e5abc4f059d8ae1d6bfdbe543d64.html