Reale.js benutzerdefinierte Ereignisse für die Kommunikation mit übergeordneten Knoten

Ich mache und höre auf normale DOMs CustomEvent, um mit übergeordneten Knoten zu kommunizieren:

Bei Kind:

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

Im Elternteil:

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

Das funktioniert, aber gibt es einen reaktionsspezifischen Weg, der besser wäre?

Wie oben beschrieben:

Der Weg der Reaktion wäre, Rückrufe explizit über Requisiten an Kinder weiterzuleiten. Es gibt keine Unterstützung für benutzerdefinierte Ereignisse mit Sprudeln in React.

Die reaktive Programmierabstraktion ist orthogonal:

Die Programmierung interaktiver Systeme mithilfe des Beobachtermusters ist schwierig und fehleranfällig, in vielen Produktionsumgebungen jedoch immer noch der Implementierungsstandard. Wir präsentieren einen Ansatz, um Beobachter schrittweise zugunsten reaktiver Programmierabstraktionen abzulehnen. Mehrere Bibliotheksebenen helfen Programmierern, vorhandenen Code reibungslos von Rückrufen auf ein deklarativeres Programmiermodell zu migrieren.

Die React-Philosophie basiert stattdessen auf dem Befehlsmuster:

Verweise

• Verwerfen des Beobachtermusters
• Befehlsmuster: Befehlsverlauf
• Komponenteninterop mit Reaktions- und benutzerdefinierten Elementen
• Erstellen von Redux in TypeScript
• Wie unterscheidet sich Mithril von anderen Frameworks - Mithril?

Sie können einen einfachen Dienst schreiben und ihn dann verwenden

/** 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];
  },
};

Beispiel (dasselbe zum Auslösen)

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

Sie können Ereignisse durch Rückrufe in die Luft sprudeln lassen, die über Kontexte weitergegeben werden: [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;

Es gibt noch eine andere, die ich gefunden habe und die auch ziemlich vernünftig ist, besonders wenn das Bohren von Löchern von Eltern zu Kind zu Kind bereits umständlich wird. Er nannte es weniger einfache Kommunikation. Hier ist der Link:

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

Eine mögliche Lösung, wenn Sie unbedingt müssen auf die Beobachter - Muster in einem ReactJs greifen app Sie ein normales Ereignis kapern kann. Wenn Sie beispielsweise möchten <div>, dass der <div>Löschschlüssel ein zum Löschen markiertes Schlüssel verursacht , können Sie auf ein Keydown-Ereignis warten, das von einem benutzerdefinierten Ereignis aufgerufen wird. Fangen Sie den Keydown am Körper ein und customEventsenden Sie ein Keydown-Ereignis an den ausgewählten <div>. Teilen, falls es jemandem hilft.

Ein zentrales Geschäft [Redux], das den Status an Kunden verteilt und dann den Status wieder an das Geschäft sendet, ist ebenfalls wie ein Beobachtermuster. Eine Möglichkeit zum Veröffentlichen / Abonnieren ist nur aufgrund des expliziten (spröden?) Overheads beim Verbinden von Requisiten / Ereignispfaden schlechter. Durch Hierarchie hacken React bietet Kontext (Anbietermuster) oder beobachtbare Bibliotheken, die stinken. Wie MobX, das neue Dekoratoren @observable einführt, oder Vue, das die neue Vorlagensyntax "v-if" einführt. Ereignisse sind sowieso die Hauptmethode, mit der DOM- und Javascript-Ereignisschleifen funktionieren. Warum also nicht? Ich denke, die Satanisten haben es getan. Lol

Mir ist klar, dass diese Frage mittlerweile ziemlich alt ist, aber diese Antwort könnte immer noch jemandem helfen. Ich habe ein JSX-Pragma für React geschrieben, das deklaratives benutzerdefiniertes Ereignis hinzufügt: jsx-native-events .

Grundsätzlich verwenden Sie das onEvent<EventName>Muster nur, um nach Ereignissen zu suchen.

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