イベントバスは反応で使用できますか?

イベント バスは React で使用できます。React はコンポーネント間のイベント転送を解決するためにイベント バスを使用します。一般的に使用されるライブラリ イベントを使用して、対応する操作を完了できます。npm または Yarn を使用してインストールできます. events の構文は「npm install events」と「yarn add events」です。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

reactでイベントバスが使えるようになる

reactイベントバスで解決できる問題:コンポーネント間のイベント送信

問題がある場合React 開発でコンポーネント間でイベントを転送するにはどうすればよいですか?

A. Vue では、Vue のインスタンスを通じてイベント バス (EventBus) をすばやく実装して操作を完了できます;

B. React では、一般的に使用されるライブラリを利用できます対応する操作を完了するためのイベント;

実装方法

サードパーティ ライブラリ イベントを使用して実装する

共通 API

EventEmitter オブジェクトの作成:eventBus オブジェクト

イベントの発行:eventBus.emit("イベント名", パラメーター リスト)

イベントのリッスン:eventBus.addListener("event name", listen 関数)

イベントの削除:eventBus.removeListener("イベント名", listen 関数)

使用前にインストールする必要があります。次の 2 つの方法のいずれかを選択します

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. QcEventEmitter を EventTest コンポーネントに導入します

B. クリック イベント

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;)
  }
}

# の QcEventEmitter.emit を通じてイベントを送信します##デフォルトの EventTest をエクスポート;

パーソン ファイルの内容

A. QcEventEmitter は Person コンポーネントに導入されています。

B.ComponentDidMount の QcEventEmitter.addListener を通じてイベントをリッスンします。

##C.componentWillUnmount の QcEventEmitter.removeListener に移動します。イベントの監視に加えて、

import React, { Component, useContext } from 'react';
import QcEventEmitter from 'common/utils/QcEventEmitter'
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 id="这是Person子组件">这是Person子组件</h2>
      </div>
    );
  }
}
export default Person;

App.js ファイルで EventTest コンポーネントと Person コンポーネントをレンダリングします (Person コンポーネントがレンダリングされた後、 EventTest によって発行されたイベントをリッスンでき、それらの間の依存関係は必要ありません)

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

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド]

以上がイベントバスは反応で使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。