Синтаксис EventEmitter и подписчика ES6 с React Native

Я пытаюсь реализовать отношение EventEmitter / Subscriber между двумя компонентами в собственном классе react. Я видел ссылки на следующие материалы:

эти решения адекватны для того, что я пытаюсь выполнить, однако они беспокоят требуют использования mixins: [Subscribable.Mixin] на получение компонента для правильной работы с Subscriber. К сожалению, я использую ES6 и расширяю свои классы от Component поэтому я не могу использовать этот синтаксис mixin.

мой вопрос: Как я могу реализовать вышеуказанные решения в ES6 без использования mixins?

12
eventemitter mixins react-native

2 ответов

вам не нужны миксины для использования EventEmitters.

простой пример:

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

полная подпись addListener принимает три args:

EventEmitter.addListener(eventName, handler, handlerContext)

в компоненте react вы, вероятно, захотите использовать этот контекстный arg, чтобы обработчик мог быть методом класса вместо встроенной функции и все еще сохранять this == component instance. Например:

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: я получил это, глядя На решительно немагическую реализацию позорный Subscribable миксин!--16-->. Результаты поиска Google-это в основном эхо-камера одной демо-версии Ramsay на основе mixin.

P.S. Что касается воздействия этого эмиттера на другой компонент, я, вероятно, имел бы компонент-владелец, предоставляющий функцию для получения ссылки на эмиттер, и компонент, который создает эмиттер, затем условно выполнит эту опору с эмиттером.

// 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);
    }
}
21

я смог получить обходной путь с реагировать-mixin. Не уверен, насколько это правильно, но он работает без каких-либо изменений. Ключ добавляет reactMixin(DetailView.prototype, Subscribable.Mixin); после определения класса.

уходят на примере, что плавает на поверхности EventEmitter и Subscribable:

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