Explicación detallada del uso de evenbus de la comunicación de componentes en reaccionar (caso de paso por valor de componente hermano)

prefacio

Hoy, presentaré otra forma de pasar valores en reaccionar: usar evenbus para pasar valores, sigue siendo lo mismo que un pequeño caso para explicar su uso específico.

Valor de aprobación del componente Brother

En los componentes hermanos, el bus de eventos eventbus se usa para la comunicación y el bus de eventos de publicación-suscripción se usa para la comunicación. Para usar evenbus primero necesitamos descargarlo
Descargar eventos:

yarn add -D events

Luego crea un nuevo archivo event.js de la siguiente manera:

import {
    
     EventEmitter } from "events"

// 导入事件总线,利用这个对象发射和监听事件,这个对象是全局的
const eventBus = new EventEmitter()

export default eventBus

Llegamos al componente hermano A, presentamos eventBus y luego usamos emit para enviar eventos:
preste atención al formato de envío: enviar evento eventBus.emit('nombre del evento', parámetro 1, parámetro 2)

import React, {
    
     Component } from 'react'
import eventBus from './event'

export class Header extends Component {
    
    
    send = () => {
    
    
        let name = '点赞关注，好好学前端'
        let arr = [1, 2, 3, 4]
        // 发送事件eventBus.emit('事件名', 参数1, 参数2)
        eventBus.emit('sayHello', name, arr)
    }
    render() {
    
    
        return (
            <div>Header Page
                <button onClick={
    
    this.send}>发送事件给footer组件</button>
            </div>
        )
    }
}

export default Header

El componente B de Brother recibe datos y los imprime al procesar el evento de escucha:

import React, {
    
     Component } from 'react'
import eventBus from './event'
export class Footer extends Component {
    
    
    // 添加事件监听,监听从header组件发送过来的sayHello事件
    componentDidMount() {
    
    
        eventBus.addListener('sayHello', this.sayHelloContent)
    }
    // 处理监听事件
    sayHelloContent(a, b) {
    
    
        console.log(a, b)
    }
    // 移除事件监听
    componentWillUnmount() {
    
    
        eventBus.removeListener('sayHello', this.sayHelloContent)
    }
    render() {
    
    
        return (
            <div>Footer</div>
        )
    }
}

export default Footer

Haga clic en el botón para activar el evento de clic del componente A y observe el resultado:

Esto completa la transferencia de valor entre componentes hermanos. Resumamos el uso:

Resumen de uso de Evenbus

1. Descargar eventos:

yarn add -D events

2. Cree un nuevo archivo event.js y escriba el siguiente contenido:

import {
    
     EventEmitter } from "events"

// 导入事件总线,利用这个对象发射和监听事件,这个对象是全局的
const eventBus = new EventEmitter()

export default eventBus

3. Introduzca eventBus a la página que necesita enviar eventos y luego use emit para enviar eventos

// 发送事件eventBus.emit('事件名', 参数)
eventBus.emit('sayHello', name, arr)

4. Introduzca eventBus en la página que necesita recibir eventos y luego use addListener para escuchar eventos.

// 添加事件监听,监听从header组件发送过来的sayHello事件
componentDidMount() {
    
    
    eventBus.addListener('sayHello', this.sayHelloListener)
}
// 处理事件监听
sayHelloListener(a, b){
    
    
    console.log(a, b) // 这样就拿到从另一个兄弟组件中传过来的值了
}

5. Eliminar detectores de eventos, en el componente de ciclo de vidaWillUnmount

// 移除事件监听
componentWillUnmount() {
    
    
    eventBus.removeListener('sayHello', this.sayHelloListener)
}

Bueno, este artículo ha terminado. Si te es útil, dale me gusta, síguelo y apóyalo~ Te
traeré más contenido de alta calidad en el futuro~