React.js eventos personalizados para comunicarse con los nodos principales

Estoy creando y escuchando los DOM normales CustomEventpara comunicarse 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 padre:

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

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

Como se señaló anteriormente:

La forma de React sería pasar devoluciones de llamada a los niños explícitamente a través de accesorios -. No hay soporte para eventos personalizados con burbujeo en React.

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

La programación de sistemas interactivos mediante el 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 desaprobar gradualmente a los observadores a favor de abstracciones de programación reactiva. Varias capas de biblioteca ayudan a los programadores a migrar sin problemas el código existente de devoluciones de llamada a un modelo de programación más declarativo.

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

Referencias

• Depreciar el patrón de observador
• Patrón de comando: historial de comandos
• Interoperabilidad de componentes con React y elementos personalizados
• Construyendo Redux en TypeScript
• ¿En qué se diferencia el mithril de otros marcos? - Mithril

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

Puede generar eventos a través de devoluciones de llamada transmitidas a través de contextos: [CodePen]

import * as React from 'react';

const MyEventContext = React.createContext(() => {});

const MyEventBubbleContext = ({children, onMyEvent}) => {
  const bubbleEvent = React.useContext(MyEventContext);
  const handleMyEvent = React.useCallback((...args) => {
    // stop propagation if handler returns false
    if (onMyEvent(...args) !== false) {
      // bubble the event
      bubbleEvent(...args);
    }
  }, [onMyEvent]);
  return (
    <MyEventContext.Provider value={handleMyEvent}>
      {children}
    </MyEventContext.Provider>
  );
};

const MyComponent = () => (
  <MyEventBubbleContext onMyEvent={e => console.log('grandparent got event: ', e)}>
    <MyEventBubbleContext onMyEvent={e => console.log('parent got event: ', e)}>
      <MyEventContext.Consumer>
        {onMyEvent => <button onClick={onMyEvent}>Click me</button>}
      </MyEventContext.Consumer>
    </MyEventBubbleContext>
  </MyEventBubbleContext>
);

export default MyComponent;

Hay otro que encontré que también es bastante razonable, especialmente si perforar agujeros de padre a hijo ya se vuelve engorroso. 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

Una posible solución, si absolutamente debe recurrir al patrón Observer en una aplicación ReactJs, puede secuestrar un evento normal. Por ejemplo, si desea que la clave de eliminación provoque un <div>marcado para su eliminación, puede hacer que <div>escuche un evento de keydown que será invocado por un evento personalizado. Atrapa el keydown en el cuerpo y envía un customEventevento keydown en el seleccionado <div>. Compartir en caso de que ayude a alguien.

Una tienda central [Redux] que distribuye el estado a los clientes, que luego el estado de 'despacho' de regreso a la tienda es como un patrón de observador también. Una forma de publicar / suscribirse solo es peor debido a la sobrecarga explícita (¿frágil?) Que conecta las rutas de accesorios / eventos. Para cortar la jerarquía, React proporciona contexto (patrón de proveedor) o bibliotecas observables que apestan. Como MobX que presenta nuevos decoradores @observable, o Vue que presenta una nueva sintaxis de plantilla "v-if". Los eventos son la forma principal en que el bucle de eventos DOM y JavaScript funciona de todos modos, así que ¿por qué no? Creo que los satanistas lo hicieron. Jajaja

Me doy cuenta de que esta pregunta ya es bastante antigua, pero esta respuesta aún podría ayudar a alguien. Escribí un pragma JSX para React que agrega un evento personalizado declarativo: jsx-native-events .

Básicamente, solo usa el onEvent<EventName>patrón para estar atento a los eventos.

<some-custom-element onEventSomeEvent={ callback }></some-custom-element>