具有React Native的EventEmitter和Subscriber ES6语法 [英] EventEmitter and Subscriber ES6 Syntax with React Native
问题描述
我正在尝试在React本机类中的两个组件之间实现EventEmitter/Subscriber关系.我看过参考了以下材料:
I am trying to implement an EventEmitter/Subscriber relationship between two components in a react native class. I have seen referenced the following materials:
- React Native - Event Emitters by Colin Ramsay
- React Native - Call Function of child from NavigatorIOS
这些解决方案足以满足我要完成的任务,但是,它们麻烦地要求在接收组件上使用mixins: [Subscribable.Mixin]
才能与Subscriber
一起正常工作.不幸的是,我正在使用ES6并从Component
扩展我的类,所以我不能使用此混合语法.
These solutions are adequate for what I am trying to accomplish, however, they bother require the use of mixins: [Subscribable.Mixin]
on the receiving component to work properly with Subscriber
. Unfortunately, I am using ES6 and extending my classes from Component
so I can not use this mixin syntax.
我的问题是:如何在不使用Mixins的情况下在ES6中实现上述解决方案?
My question is: How can I implement the above solutions in ES6 without the use of mixins?
推荐答案
您不需要mixin即可使用EventEmitters.
You don't need mixins to use 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
的完整签名带有三个参数:
The full signature for addListener
takes three args:
EventEmitter.addListener(eventName, handler, handlerContext)
在react组件中,您可能想使用该上下文arg,以便处理程序可以是类方法而不是内联函数,并且仍然保留this == component instance
.例如:
In a react component, you likely want to use that context arg, so that the handler can be a class method instead of an inline function and still retain 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 });
};
仅供参考:我是通过查看臭名昭著的Subscribable mixin . Google搜索结果基本上是Ramsay的基于mixin的单个演示的回声室.
FYI: I got this from looking at the decidedly unmagical implementation of the infamous Subscribable mixin. Google search results are basically an echo chamber of Ramsay's single mixin-based demo.
P.S.至于将此发射器暴露给另一个组件,我可能会让拥有它的组件提供接收发射器参考的功能,然后创建发射器的组件将有条件地用发射器执行该道具.
P.S. As far as exposing this emitter to another component, I'd probably have the owning component provide a function for receiving the emitter reference, and the component that creates the emitter would then conditionally execute that prop with the emitter.
// 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);
}
}
这篇关于具有React Native的EventEmitter和Subscriber ES6语法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!