Question

我想在我的React应用程序中使用npm的'events'模块。我有一个使用phaserjs开发的游戏，该游戏还具有关卡编辑器。 “事件”将用于与游戏模块进行通信。根目录的文件夹结构

客户
- src
  - App.js
  - index.js
  - 组件/游戏视图
  - Components / level-creator-view
游戏
服务器

有些人做过同样的事情，但是角度偏强- 在app.js中

const eventEmitter = require('events').EventEmitter();
window.eventEmitter = eventEmitter;
eventEmitter.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })

在他的角度应用程序的其他状态下，他只会-

const eventEmitter = window.eventEmitter;
eventEmitter.emit('start game');

Here's the link to that project,在浏览器模块，app.js和浏览器/状态/创建级别中查找

我想做同样的事情，我的项目相似，但是游戏逻辑不同。

游戏模块具有所有必要的事件发射器和侦听器设置

我尝试在index.js中设置window.eventsEmitter（）并在其他组件中使用它。问题从这里开始，如何在React类或函数中使用它，应该在构造函数中使用，还是应该在生命周期方法中设置它，还是应该将它完全替换为js文件并包含它？我尝试了最多（最后一个除外），但失败了。

我还搜索了有关操作方法的信息，没有得到我想要的确切信息。任何建议都会很有帮助。预先感谢。

Answer 1

另一种方法是创建文件eventEmitter.tsx（以防您使用打字稿）：

import { EventEmitter } from 'events'

const eventEmitter = new EventEmitter()

export default eventEmitter

然后在任何其他文件中可以包含此文件。

import eventEmitter from './eventEmitter'

const Hello = () => {
  const someFunction = () => {}
  useEffect(() => {
    eventEmitter.on('your-event', someFunction)
    return () => {
      eventEmitter.off('your-event', someFunction)
    }
  })
}

Answer 2

EventEmitter的语法似乎不起作用。我在这里使用了npm页面上的示例（并且有效）- https://www.npmjs.com/package/events

将此添加到App.js：

const eventEmitter = require('events');
window.ee = new eventEmitter();
ee.on('loaded', () => { console.log('\n\ncreator loaded\n\n') })
ee.on('test', () => { console.log('\n\ntest fired\n\n') })

然后从任何组件构造函数（或componentdidmount等）获取：

constructor( props ) {
    super( props );
    ee.emit('test', 'asdf')
}

如何在Reactjs中将npm的'events'模块用于eventEmitters

2 个答案: