09_非父子通信 -eventBus

深林最里人已无

已于 2023-04-25 21:21:43 修改

阅读量101

点赞数

文章标签： javascript 前端 react.js

于 2023-04-24 21:52:25 首次发布

本文链接：https://blog.csdn.net/weixin_56490825/article/details/130353099

版权

该文章展示了一个使用名为HYEventBus的第三方库来实现在React组件之间通信的例子。组件App监听并响应HomeBanner组件通过事件总线发送的bannerPrev和bannerNext事件，从而更新自身的状态。

摘要由CSDN通过智能技术生成

用到的第三方库 hy-event-store

import {HYEventBus} from "hy-event-store"

const eventBus = new HYEventBus()
export default eventBus

//事件总线 
import React, { Component } from 'react'
import Home from './Home'
import eventBus from './utils/event-bus'

export class App extends Component {
    constructor(){
        super()
        this.state = {
            name:"",
            age:0,
            height:0
        }
    }
    componentDidMount(){
        eventBus.on("bannerPrev",this.bannerPrevClick,this)  // 第三个参数可以传入一个this
        eventBus.on("bannerNext",this.bannerNextClick,this) 
    }
    bannerPrevClick(name,age,height){
      // console.log(1111);
      this.setState({
                name,age,height
            })
    }
    bannerNextClick(name,age,height){
      this.setState({
        name,age,height
    })
    }
    componentWillUnmount(){
      eventBus.off("bannerPrev",this.bannerPrevClick)
      eventBus.off("bannerNext",this.bannerNextClick)
    }
  render() {
    const {name,age,height} = this.state
    return (
      <div>
        <p>App Compoment</p>
        <i>{name}</i>
        <i>{age}</i>
        <i>{height}</i>
        <Home/>
      </div>
    )
  }
}

export default App


//--------------Home--------------------------------

import React, { Component } from 'react'
import HomeBanner from './HomeBanner'

export class Home extends Component {
  render() {
    return (
      <div>
        <p>Home Component</p>
        <HomeBanner/>
      </div>
    )
  }
}

export default Home
//-------------HomeBanner-----------------------

import React, { Component } from 'react'
import eventBus from './utils/event-bus';

export class HomeBanner extends Component {

    prevClick(){
        console.log("上一个");
        eventBus.emit("bannerPrev","prev",18,1.88)
    }
    nextClick(){
        console.log("下一个");
        eventBus.emit("bannerNext","next",19,1.68)
    }
  render() {
    return (
      <div>
        <h2>HomeBanner</h2>
        <button onClick={()=>this.prevClick()}>上一个</button>
        <button onClick={()=>this.nextClick()}>下一个</button>
        </div>
    )
  }
}

export default HomeBanner