Syntaxe EventEmitter et Subscriber ES6 avec React Native

Question

Syntaxe EventEmitter et Subscriber ES6 avec React Native

j'essaie de mettre en place une relation EventEmitter/Subscriber entre deux composants dans une classe native react. J'ai vu référencé dans les matériaux suivants:

ces solutions sont adéquates pour ce que j'essaie d'accomplir, cependant, elles nécessitent l'utilisation de mixins: [Subscribable.Mixin] sur le la composante de réception doit fonctionner correctement avec Subscriber. Malheureusement, J'utilise ES6 et j'allonge mes cours de Component donc je ne peux pas utiliser cette syntaxe de mixin.

ma question Est: Comment puis-je implémenter les solutions ci-dessus dans ES6 sans l'utilisation de mixins?

12

eventemitter mixins react-native

demandé sur Community 2016-04-21 18:44:49

2 réponses

score 21 · Answer 1

vous n'avez pas besoin de mixins pour utiliser EventEmitters.

Simple démo:

import EventEmitter from 'EventEmitter';

let x = new EventEmitter();

function handler(arg) {
    console.log(`event-name has occurred! here is the event data arg=${JSON.stringify(arg)}`);
}

x.addListener('event-name', handler);

x.emit('event-name', { es6rules: true, mixinsAreLame: true });

La signature complète pour addListener prend trois arguments:

EventEmitter.addListener(eventName, handler, handlerContext)

dans un component react, vous voudrez probablement utiliser cet arg de contexte, de sorte que le handler puisse être une méthode de classe au lieu d'une fonction inline et conserver this == component instance. E. g.:

componentDidMount() {
    someEmitter.addListener('awesome', this.handleAwesomeEvents, this);
    // the generalist suggests the alternative:
    someEmitter.addListener('awesome', this.handleAwesomeEvents.bind(this));
}

handleAwesomeEvents = (event) => {
    let awesomeness = event.awesomeRating;

    // if you don't provide context in didMount,
    // "this" will not refer to the component,
    // and this next line will throw
    this.setState({ awesomeness });
};

FYI: j'ai eu cela en regardant la mise en œuvre décidément non logique de l'infâme Subscribable mixin. Les résultats de recherche Google sont essentiellement une chambre d'écho de la démo simple mixin de Ramsay.

// owner's render method:
<ThingThatEmits
    onEmitterReady={(emitter) => this.thingEmitter = emitter}
/>

// inside ThingThatEmits:
componentDidMount() {
    this.emitter = new EventEmitter();

    if(typeof this.props.onEmitterReady === 'function') {
        this.props.onEmitterReady(this.emitter);
    }
}

score 1 · Answer 2

j'ai pu obtenir une solution de contournement avec réagissent-mixin. Je ne sais pas si elle est correcte, mais elle fonctionne sans aucune modification. La clé est l'ajout d' reactMixin(DetailView.prototype, Subscribable.Mixin); d'après la définition de la classe.

fin de l'exemple qui flotte autour de EventEmitter et abonnez-vous:

'use strict';

var reactMixin = require('react-mixin');
var React = require('react-native');
var EventEmitter = require('EventEmitter');
var Subscribable = require('Subscribable');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS
} = React;

class MainView extends Component {
    constructor(props){
      super(props);
      this.EventEmitter = new EventEmitter();
    }

    somethingHappenedFunction(){
      this.EventEmitter.emit("update_event", { message: "hello from up here"});
    }

    //rest of the class
}

class DetailView extends Component {
   componentDidMount(){
     this.addListenerOn(this.props.events, 'update_event', this.miscFunction);
   }

   miscFunction(args) {
    console.log("message: %s", args.message);
   }

   //rest of the class
}
reactMixin(DetailView.prototype, Subscribable.Mixin);

Las etiquetas más populares

Syntaxe EventEmitter et Subscriber ES6 avec React Native

2 réponses