React 兄弟组件传参，或者是没有共同父组件的兄弟组件之间的传参

父组件与子组件通讯经常用的是props，那么兄弟组件呢【标题的情况同样适用】
今天记录一下使用自定义事件的方式实现通讯

引入一个events包

cnpm i events -S

我们在utils文件夹里创建个event.js

import {
      EventEmitter } from 'events'
export default new EventEmitter()

在接收/监听的组件里 （emitter ? 是引入的方法，往下看例子…）

function Big2() {
     
    emitter.on('message', opt => {
     
        console.log(opt)   // 参数
    })
    return (
        <div>Big2</div>
    )
}

在触发的组件

function Big() {
     
    const onClick = () => {
     
        emitter.emit('message', '参数')
    }
    return (
        <div>Big:
            <button onClick={
     onClick}>点我</button>
        </div>
    )
}

一个简单的例子：

import React from 'react';
import emitter from '@/utils/event'
import './styles.less'

export default class extends React.PureComponent {
     
    render() {
     
        return (
            <div className='pages_options'>
                pages_options
                <Big />
                <Big2 />
            </div>
        )
    }
}

function Big() {
     
    const onClick = () => {
     
        emitter.emit('message', '参数')
    }
    return (
        <div>Big:
            <button onClick={
     onClick}>点我</button>
        </div>
    )
}

function Big2() {
     
    emitter.on('message', opt => {
     
        console.log(opt)   // 参数
    })
    return (
        <div>Big2</div>
    )
}