Как использовать модуль событий npm в Reactjs для eventEmitters
Я хочу использовать модуль событий npm в своем приложении React. У меня есть игра, разработанная в Phaserjs, в которой также есть редактор уровней. «События» будут использоваться для связи с игровым модулем. Структура папок от корня
- Клиент
- источник
- App.js
- index.js
- Компоненты/вид игры
- Компоненты/представление создателя уровня
- источник
- Игра
- Сервер
Кто-то сделал то же самое, но в угловом... в этом app.js
const eventEmitter = require('events').EventEmitter();
window.eventEmitter = eventEmitter;
eventEmitter.on('loaded', () => { console.info('\n\ncreator loaded\n\n') })
а в других состояниях своего углового приложения он просто брал --
const eventEmitter = window.eventEmitter;
eventEmitter.emit('start game');
Вот ссылка на этот проект, смотрите в модуле браузера, app.js, а также в browser/states/createlevel
Я хочу сделать то же самое, мой проект похож, но игровая логика другая.
В игровом модуле настроены все необходимые эмиттеры и слушатели событий.
Я попытался настроить window.eventsEmitter() в своем index.js и использовать его в других компонентах. Проблема начинается здесь, как мне использовать его в классе или функции React, должен ли он быть в конструкторе или я должен настроить его в методах жизненного цикла, или я должен поместить его в совершенно другой файл js и включить его? Я пробовал большинство (кроме последнего), но не смог.
Я также искал, как это сделать, но не получил именно то, что ищу. Любое предложение будет действительно полезным. Заранее спасибо.
Ответы 2
Этот синтаксис для EventEmitter, похоже, не работает. Я использовал пример со страницы npm здесь (и он работает) - https://www.npmjs.com/package/events
Добавьте это в App.js:
const eventEmitter = require('events');
window.ee = new eventEmitter();
ee.on('loaded', () => { console.info('\n\ncreator loaded\n\n') })
ee.on('test', () => { console.info('\n\ntest fired\n\n') })
Затем из любого конструктора компонентов (или componentdidmount и т. д.):
constructor( props ) {
super( props );
ee.emit('test', 'asdf')
}
Другой подход — создать файл 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)
}
})
}
Это, безусловно, самый простой способ реализации взаимодействия компонентов для React JS ?