本文共 1751 字，大约阅读时间需要 5 分钟。

非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件 

针对这种情况的组件通信,常用两种方式处理

利用二者共同父级组件的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;

转载