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