reactjs - props - react logo

eventos personalizados de react.js para comunicarse con los nodos principales

Question

Estoy creando y escuchando DOM CustomEvent s normal para comunicarme con los nodos principales:

En niño:

  var moveEvent = new CustomEvent(''the-graph-group-move'', { 
    detail: {
      nodes: this.props.nodes,
      x: deltaX,
      y: deltaY
    },
    bubbles: true
  });
  this.getDOMNode().dispatchEvent(moveEvent);

En el padre:

componentDidMount: function () {
  this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},

Esto funciona, pero ¿hay una forma específica de reacción que sería mejor?

Answer 1

Como se señaló anteriormente:

El modo React sería pasar las retrollamadas a los niños de forma explícita a través de accesorios. No hay soporte para eventos personalizados con burbujas en React.

La abstracción de programación reactiva es ortogonal:

La programación de sistemas interactivos por medio del patrón de observador es difícil y propensa a errores, pero sigue siendo el estándar de implementación en muchos entornos de producción. Presentamos un enfoque para depreciar gradualmente a los observadores a favor de abstracciones de programación reactiva. Varias capas de bibliotecas ayudan a los programadores a migrar sin problemas el código existente de devoluciones de llamadas a un modelo de programación más declarativo.

La filosofía React se basa en el patrón Command en su lugar:

Referencias

• Despreciar el patrón observador
• Patrón de comando: historial de comandos
• Interoperación de componentes con reactivos y elementos personalizados
• Construyendo Redux en TypeScript
• ¿Cómo se diferencia el Mithril de otros marcos - Mithril

Answer 2

Hay otro que encontré que es bastante razonable, especialmente si perforar agujeros de padres a hijos se vuelve engorroso. Él lo llamó comunicación menos simple. Aquí está el enlace:

https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

Answer 3

Puede subir los eventos a través de las devoluciones de llamadas transmitidas a través de contextos: [CodePen]

import React, {Component, PropTypes} from ''react'';

class EventContext extends Component {
  static contextTypes = {
    onMyEvent: PropTypes.func
  };
  static childContextTypes = {
    onMyEvent: PropTypes.func.isRequired
  };
  static propTypes = {
    onMyEvent: PropTypes.func.isRequired
  };
  getChildContext() {
    let {onMyEvent} = this.props;
    return {
      onMyEvent: (...args) => {
        // stop propagation if handler returns false
        if (onMyEvent(...args) !== false) {
          // bubble the event
          this.context.onMyEvent && this.context.onMyEvent(...args);
        }
      }
    };
  }
  render() {
    return this.props.children;
  }
}

class MyComponent extends Component {
  static contextTypes = {
    onMyEvent: PropTypes.func
  };
  render() {
    let {onMyEvent} = this.context;
    return <button onClick={onMyEvent}>Click me</button>;
  }
}

export default <EventContext onMyEvent={e => console.log(''grandparent got event: '', e)}>
  <EventContext onMyEvent={e => console.log(''parent got event: '', e)}>
    <MyComponent/>
  </EventContext>
</EventContext>;

Answer 4

Una posible solución, si absolutamente debes recurrir al patrón Observer en una aplicación ReactJs, puedes secuestrar un evento normal. Por ejemplo, si desea que la clave de eliminación cause un <div> marcado para su eliminación, puede hacer que el <div> escuche un evento de pulsación que será invocado por un evento personalizado. Atrape el chasquido en el cuerpo y customEvent un evento de chasquido de evento personalizado en el <div> seleccionado. Compartir en caso de que ayude a alguien.

Answer 5

Una tienda central [Redux] que distribuye estado a los clientes, que luego ''envía'' estado de vuelta a la tienda es como un patrón de observador también. Una forma de publicar / suscribirse solo es peor debido a que los recursos explícitos (¿frágiles?) Conectan los apoyos / rutas de eventos. Para atacar a través de la jerarquía, React proporciona un contexto (patrón del proveedor) o bibliotecas observables que apestan. Al igual que MobX, que presenta nuevos decoradores @observable, o Vue, que presenta una nueva sintaxis de plantilla "v-if". Los eventos son la principal forma en que DOM y javascript event loop funcionan de todos modos, ¿por qué no? Creo que los satanistas lo hicieron. Jajaja

Answer 6

puedes escribir un servicio simple y luego usarlo

/** eventsService */
module.exports = {
  callbacks: {},

  /**
   * @param {string} eventName
   * @param {*} data
   */
  triggerEvent(eventName, data = null) {
    if (this.callbacks[eventName]) {
      Object.keys(this.callbacks[eventName]).forEach((id) => {
        this.callbacks[eventName][id](data);
      });
    }
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   * @param {Function} callback
   */
  listenEvent(eventName, id, callback) {
    this.callbacks[eventName][id] = callback;
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   */
  unlistenEvent(eventName, id) {
    delete this.callbacks[eventName][id];
  },
};

ejemplo (lo mismo para disparar)

import eventsService from ''../../../../services/events'';
export default class FooterMenu extends Component {
  componentWillMount() {
    eventsService
      .listenEvent(''cart'', ''footer'', this.cartUpdatedListener.bind(this));
  }

  componentWillUnmount() {
    eventsService
      .unlistenEvent(''cart'', ''footer'');
  }

  cartUpdatedListener() {
    console.log(''cart updated'');
  }
}