React非親子コンポーネント通信センターイベントマネージャ

10959 ワード

JavaScript react

はじめに

React非親子コンポーネント通信は、中央イベントマネージャを使用してもよいが、実際には購読モードを発行することができる.
二、中央イベントマネージャを定義する

Buss.jsファイル

let map = {
     }

const bus = {
     
  /**
   *     ,    
   * @param {String} eventName      
   * @param {Function} callback     
   */
  subscribe: (eventName, callback) => {
     
    //  map  [eventName]key      ,        
    if (!map[eventName]) {
     
      map[eventName] = []
    }
    //  map  [eventName]key     ,          
    map[eventName].push(callback)
  },
  /**
   *     ,    
   * @param {String} eventName      
   * @param {*} payload          
   */
  dispatch: (eventName, payload) => {
     
    //  map  [eventName]key      ,   
    if (!map[eventName]) {
     
      return
    }
    //  map  [eventName]key     ,   ,            ,payload     
    map[eventName].forEach((cb) => cb(payload))
  }
}

export default bus

三、親子以外のコンポーネント――購読者

Brother.js

import React from 'react'
import bus from './Bus.js'//              
export default class Brother2 extends React.Component {
     
  state = {
     
    isShow: true
  }
  // react       
  componentDidMount() {
     
    bus.subscribe('abc', (payload) => {
     
      this.setState({
     
        isShow: payload
      })
    })
  }

  render() {
     
    let {
      isShow } = this.state
    return (
      <div>
        {
     isShow ? (
          <div
            style={
     {
      width: '200px', height: '200px', background: 'green' }}
          />
        ) : null}
      </div>
    )
  }
}

四、親子以外の部品――発表者

Brother 1.js

import React, {
      Component } from 'react'
import bus from './Bus.js'
export default class Brother1 extends Component {
     
  state = {
     
    is: true
  }
  render() {
     
    return <button onClick={
     this.isHandle}>  /  </button>
  }
  isHandle = () => {
     
    this.setState(
      {
     
        is: !this.state.is
      },
      console.log(this.state.is)
    )
    bus.dispatch('abc', this.state.is)
  }
}

対象に向けたプログラミング——対象を理解する