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