你不需要使用mixin来使用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 });
< p >
addListener
的完整签名需要三个参数:
EventEmitter.addListener(eventName, handler, handlerContext)
在一个React组件中,您可能希望使用上下文参数,这样处理程序可以是类方法而不是内联函数,并且仍然保留
this == 组件实例
。例如:
componentDidMount() {
someEmitter.addListener('awesome', this.handleAwesomeEvents, this);
someEmitter.addListener('awesome', this.handleAwesomeEvents.bind(this));
}
handleAwesomeEvents = (event) => {
let awesomeness = event.awesomeRating;
this.setState({ awesomeness });
};
注意:我是通过查看绝非神奇的
Subscribable mixin实现得出这个结论的。Google 搜索结果基本上是 Ramsay 的单个 mixin 演示的回声室。
另外,如果要将此发射器暴露给另一个组件,我可能会让拥有该组件的组件提供一个函数来接收发射器引用,然后创建发射器的组件将使用该发射器条件地执行该 prop。
<ThingThatEmits
onEmitterReady={(emitter) => this.thingEmitter = emitter}
/>
componentDidMount() {
this.emitter = new EventEmitter();
if(typeof this.props.onEmitterReady === 'function') {
this.props.onEmitterReady(this.emitter);
}
}
react-mixin
。 - Tom