React 兄弟组件通信（pubsub-js）

1.先安装 npm i pubsub-js

2.谁接收数据 就在那个组件componentDidMount里面订阅消息 然候在componentWillUnmount里取消订阅

list组件

   componentDidMount(){ //订阅消息  add数据名称 data数据
      this.token =  PubSub.subscribe('add',(_,data)=>{
            console.log(data);
        })
    }


    componentWillUnmount(){ //组件即将卸载的时候 取消订阅
        PubSub.unsubscribe(this.token);  
    }

 

 3.seatch组件 发布数据

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class seartch extends Component {
   
    search=()=>{
        const { keyWordElement: { value } } = this

        PubSub.publish('add',{name:'孙悟空',age:'18'}) //发布数据
    }
  render() {
    return (
      <div>
        <input ref={c => this.keyWordElement = c} type="text" />&nbsp; <button onClick={this.search}>Search</button>
      </div>
    )
  }
}