首頁 >web前端 >前端問答 >react中可以使用事件匯流排嗎

react中可以使用事件匯流排嗎

WBOY
WBOY原創
2022-06-27 16:28:551916瀏覽

react中可以使用事件匯流排;react使用事件匯流排可以用來解決跨元件之間的事件傳遞,可以利用一個使用較多的函式庫events來完成對應的操作,利用npm或yarn可以安裝events,語法為「npm install events」和「yarn add events」。

react中可以使用事件匯流排嗎

本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react中可以使用事件匯流排

react 事件匯流排解決的問題:跨元件之間的事件傳遞

#在React開發中如果有跨組件之間的事件傳遞,該如何操作?

A、在Vue中我們可以透過Vue的實例,快速實作一個事件匯流排(EventBus),來完成操作;

B、在React中可以依賴一個使用較多的函式庫events 來完成對應的操作;

如何實作

借助第三方函式庫events來實作

常見的api

建立EventEmitter物件:eventBus物件

發出事件:eventBus.emit(「事件名稱」, 參數清單)

監聽事件:eventBus.addListener(「事件名稱」,監聽函數)

移除事件:eventBus.removeListener(「事件名稱」, 監聽函式)

使用前需要先安裝,下列兩種方式任選一個

npm install events 
yarn add events

events實踐:

首先新建一個檔案QcEventEmitter.js,檔案內容如下:

import { EventEmitter } from 'events'
class QcEventEmitter extends EventEmitter {};
export default new QcEventEmitter();

下面將實作EventTest元件傳遞事件給Person元件:

EventTest檔案內容

A、EventTest元件中引入QcEventEmitter

B、點擊事件中透過QcEventEmitter.emit來發送事件

import React, { Component } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
class EventTest extends Component {
  render() {
    return (
      <div>
        <button onClick={e => this.btnCLick()}>测试event事件</button>
      </div>
    );
  }
  btnCLick(){
    QcEventEmitter.emit(&#39;contextClick&#39;, &#39;Lucy&#39;, &#39;99&#39;)
  }
}

export default EventTest;

Person檔內容

A、Person元件中引入QcEventEmitter,

B、在componentDidMount中透過QcEventEmitter.addListener來監聽事件,

C、在componentWillUnmount中透過QcEventEmitter.removeListener移移除對事件的監聽

import React, { Component, useContext } from &#39;react&#39;;
import QcEventEmitter from &#39;common/utils/QcEventEmitter&#39;
class Person extends Component {
  componentDidMount(){
    QcEventEmitter.addListener("contextClick", this.headerClick)
  }
  componentWillUnmount() {
    QcEventEmitter.removeListener("contextClick", this.headerClick)
  }
  headerClick(name, age) {
    console.log(name, age);
  }
  render() {
    return (
      <div>
       <h2>这是Person子组件</h2>
      </div>
    );
  }
}
export default Person;

在App.js檔案中渲染EventTest元件和Person元件(Person元件渲染後,就可以監聽EventTest發出的事件了,他們之間並不需要任何依賴)

import React from &#39;react&#39;;
import ContetTest from &#39;./pages/contenxt&#39;
import Person from &#39;pages/contenxt/person&#39;
function App() {
  return (
    <div className="App">
      <ContetTest />
      <Person />
    </div>
  );
}
export default App;

【相關推薦:javascript影片教學web前端

以上是react中可以使用事件匯流排嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn