Bolehkah bas acara digunakan dalam tindak balas?

Bas acara boleh digunakan dalam bertindak balas menggunakan bas acara untuk menyelesaikan pemindahan acara antara komponen Anda boleh menggunakan acara perpustakaan yang biasa digunakan untuk menyelesaikan operasi yang sepadan dengan menggunakan npm atau benang ., sintaksnya ialah "acara pemasangan npm" dan "acara tambah benang".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Bas acara boleh digunakan dalam react

Masalah yang diselesaikan oleh bas acara react: pemindahan acara antara komponen

Jika terdapat sebarang dalam React pembangunan Bagaimana untuk memindahkan peristiwa antara komponen?

A. Dalam Vue, kami boleh melaksanakan bas acara (EventBus) dengan cepat melalui contoh Vue untuk menyelesaikan operasi

B, kami boleh bergantung pada perpustakaan yang biasa digunakan acara untuk menyelesaikan operasi yang sepadan;

Cara melaksanakan

Gunakan acara perpustakaan pihak ketiga untuk melaksanakan

common api

Buat objek EventEmitter: objek eventBus

Pancarkan acara: eventBus.emit("nama acara", senarai parameter)

Dengar acara: eventBus.addListener("nama acara ", Fungsi mendengar)

Alih keluar acara: eventBus.removeListener("nama acara", fungsi mendengar)

Anda perlu memasangnya sebelum digunakan. Pilih salah satu daripada dua kaedah berikut

npm install events 
yarn add events

Amalan acara:

Mula-mula buat fail baharu QcEventEmitter.js dengan kandungan berikut:

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

Yang berikut akan melaksanakan komponen EventTest untuk menghantar acara kepada Orang komponen:

Kandungan fail EventTest

A. Perkenalkan QcEventEmitter

ke dalam komponen EventTest B. Hantar acara melalui QcEventEmitter.emit dalam acara klik

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

.

eksport lalai EventTest;

Kandungan fail orang

A Perkenalkan QcEventEmitter ke dalam komponen Person,

B.

C. Dalam componentWillUnmount Remove acara pemantauan melalui 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>这是Person子组件</h2>
      </div>
    );
  }
}
export default Person;

Render komponen EventTest dan komponen Person dalam fail App.js (selepas komponen Person diberikan, anda boleh mendengar kepada peristiwa yang dipancarkan oleh EventTest, antaranya Tidak memerlukan sebarang kebergantungan)

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;

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Bolehkah bas acara digunakan dalam tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!