React非嵌套组件通信

非嵌套组件: 就是没有任何包含关系的组件,包括兄弟组件以及不再同一个父级的非兄弟组件
针对这种情况的组件通信,常用两种方式处理

  1. 利用二者共同父级组件的context对象进行通信
  2. 列表内容

自定义事件方式进行通信

第一种方式所使用的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;
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值