Evénements personnalisés pour la communication avec les nœuds parents

Je fais et écoute pour que les CustomEvent DOM CustomEvent communiquent avec les nœuds parents:

Chez l’enfant:

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

En parent:

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

Cela fonctionne, mais y a-t-il une manière spécifique à React qui serait mieux?

Comme indiqué ci-dessus:

La manière de réagir serait de transmettre explicitement les rappels aux enfants via des accessoires. Il n’y a pas de support pour les événements personnalisés avec bulles dans React.

L’abstraction de programmation réactive est orthogonale:

La programmation de systèmes interactifs au moyen du modèle de l’observateur est difficile et sujette aux erreurs, mais elle rest la norme d’implémentation dans de nombreux environnements de production. Nous présentons une approche pour déprécier progressivement les observateurs en faveur des abstractions de programmation réactives. Plusieurs couches de bibliothèque aident les programmeurs à migrer en douceur le code existant des rappels vers un modèle de programmation plus déclaratif.

La philosophie de réaction est basée sur le modèle de commande à la place:

entrer la description de l'image ici

Les références

  • Déprécier le modèle d’observateur
  • Modèle de commande: historique des commandes
  • Interopérabilité des composants avec des éléments réactifs et personnalisés
  • Construire Redux dans TypeScript
  • En quoi le mithril est-il différent des autres frameworks – Mithril

Il y en a un autre que j’ai trouvé assez raisonnable, surtout si le forage de trous d’un parent à un enfant à un autre devient déjà lourd. Il l’a appelé communication moins simple. Voici le lien:

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

Une solution possible, si vous devez absolument utiliser le modèle Observer dans une application ReactJs, vous pouvez détourner un événement normal. Par exemple, si vous souhaitez que la clé de suppression provoque un

marqué pour suppression, vous pouvez faire en sorte que

écoute un événement keydown qui sera invoqué par un événement personnalisé. customEvent sur le corps et customEvent un événement customEvent sur le

sélectionné. Partage au cas où cela aiderait quelqu’un.

Un magasin central [Redux] qui dissortingbue l’état aux clients, puis l’état «d’envoi» au magasin est également un modèle d’observateur. Une manière de publier / souscrire seulement pire en raison de la surcharge explicite (fragile?) Connectant les chemins props / événements. Pour pirater la hiérarchie, React fournit des bibliothèques de contextes (modèle de fournisseur) ou observables qui dégagent des odeurs. Comme MobX qui introduit de nouveaux décorateurs @observable, ou Vue qui introduit une nouvelle syntaxe de modèle “v-if”. Les événements sont le principal moyen utilisé par la boucle d’événement DOM et javascript, alors pourquoi pas? Je pense que les satanistes l’ont fait. Lol

vous pouvez écrire un service simple, puis l’utiliser

 /** eventsService */ module.exports = { callbacks: {}, /** * @param {ssortingng} eventName * @param {*} data */ sortingggerEvent(eventName, data = null) { if (this.callbacks[eventName]) { Object.keys(this.callbacks[eventName]).forEach((id) => { this.callbacks[eventName][id](data); }); } }, /** * @param {ssortingng} eventName name of event * @param {ssortingng} id callback identifier * @param {Function} callback */ listenEvent(eventName, id, callback) { this.callbacks[eventName][id] = callback; }, /** * @param {ssortingng} eventName name of event * @param {ssortingng} id callback identifier */ unlistenEvent(eventName, id) { delete this.callbacks[eventName][id]; }, }; 

exemple (même pour le déclenchement)

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

Vous pouvez créer des bulles à travers des rappels transmis via des contextes: [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 ; } } export default  console.log('grandparent got event: ', e)}>  console.log('parent got event: ', e)}>   ;