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?
<Child onCustomEvent={this.handleCustomEvent} />
. Es gibt keine Unterstützung für benutzerdefinierte Ereignisse mit Sprudeln in React.Antworten:
Wie oben beschrieben:
Die reaktive Programmierabstraktion ist orthogonal:
Die React-Philosophie basiert stattdessen auf dem Befehlsmuster:
Verweise
quelle
a class of debugging problems where you don't know what triggers some code because of a long chain of events triggering other events
. Die Befehlsmuster mit Einbahndatenfluss sind die Philosophie React.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'); } }
quelle
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;
quelle
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
quelle
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 undcustomEvent
senden Sie ein Keydown-Ereignis an den ausgewählten<div>
. Teilen, falls es jemandem hilft.quelle
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
quelle
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.quelle