Le bus d'événements peut-il être utilisé en réaction ?

Le bus d'événements peut être utilisé dans React ; React utilise le bus d'événements pour résoudre le transfert d'événements entre les composants. Vous pouvez utiliser une bibliothèque d'événements couramment utilisée pour effectuer les opérations correspondantes. Utilisez npm ou Yarn pour installer les événements. "Événements d'installation npm" et "événements d'ajout de fil".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Vous pouvez utiliser le bus d'événements dans React

React Le problème résolu par le bus d'événements : transfert d'événements entre composants

Dans le développement React, s'il y a transfert d'événements entre composants, comment doit-il être effectué ?

A. Dans Vue, nous pouvons rapidement implémenter un bus d'événements (EventBus) via une instance de Vue pour terminer l'opération

B Dans React, nous pouvons nous appuyer sur une bibliothèque d'événements couramment utilisée pour terminer l'opération correspondante ;

Comment implémenter

Utiliser des événements de bibliothèque tierce pour implémenter

API commune

Créer un objet EventEmitter : objet eventBus

Émettre un événement : eventBus.emit ("nom de l'événement", liste de paramètres)

Écouter les événements : eventBus.addListener("event name", listening function)

Supprimer l'événement : eventBus.removeListener("event name", listening function)

Vous devez l'installer avant utilisation. Choisissez l'une des deux méthodes suivantes.

npm install events 
yarn add events

events Pratique :

Créez d'abord un nouveau fichier QcEventEmitter.js. Le contenu du fichier est le suivant :

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

Ce qui suit implémentera le composant EventTest pour transmettre les événements au composant Person :

Contenu du fichier EventTest

A. Introduisez QcEventEmitter dans le composant EventTest

B Cliquez Dans l'événement, l'événement est envoyé via 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;

Contenu du fichier personne

A QcEventEmitter est introduit dans le composant Person,

B. L'événement est surveillé via QcEventEmitter.addListener dans composantDidMount,

C Supprimez la surveillance des événements via QcEventEmitter.removeListener dans composantWillUnmount

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;

Rendez le composant EventTest et le composant Person dans le fichier App.js (après le composant Person. Le composant est rendu, vous pouvez écouter les événements émis par EventTest. Il n'y a besoin de rien entre eux)

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;

[Recommandations associées :

tutoriel vidéo javascript, front-end web].

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!