Передача ванильного JS-объекта в качестве реквизита дочернему компоненту

Question

Я написал класс для моделирования сообщений, которые приходят в мое приложение под названием message.js

В message.js у меня определены два класса; класс Message и другой класс с именем EventEmit. Мой класс Message имеет функцию рендеринга, которая должна иметь возможность передавать объект EventEmit в качестве опоры дочернему компоненту.

В дочернем компоненте (main.js) я пытаюсь получить доступ к объекту EventEmit:

    let eventemitter = this.props.eventemitter;
    eventemitter.on('someeventstring', somecallback());

При отладке, если я останавливаюсь на второй строке, указанной выше, я могу ввести 'eventemitter', и мне возвращается объект, и я вижу метод.on().

Тем не менее, когда эта строка выполняется, я получаю 'eventemitter.on' не является ошибкой функции в консоли. Любые предложения будут ценны.

Код ниже

Message.js

export class Message extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            ...
        }
    }

    render() {
        return (
            <Index eventemitter = {EventEmitter} />
        );
    }
} 
export class EventEmitter {
    constructor() {
      this.events = {};
      this.on = this.on.bind(this);
      this.removeListener = this.removeListener.bind(this);
      this.emit = this.emit.bind(this);
    }
    on = (event, listener) => {
        if (typeof this.events[event] !== 'object') {
            this.events[event] = [];
        }
        this.events[event].push(listener);
        return () => this.removeListener(event, listener);
    }
    removeListener = (event, listener) => {
      if (typeof this.events[event] === 'object') {
          const idx = this.events[event].indexOf(listener);
          if (idx > -1) {
            this.events[event].splice(idx, 1);
          }
      }
    }
    emit = (event, ...args) => {
      if (typeof this.events[event] === 'object') {
        this.events[event].forEach(listener => listener.apply(this, args));
    }
}

index.js

componentDidMount() {

    let eventemitter = this.props.eventemitter;
    eventemitter.on('someeventstring', somecallback()); //<--Problem line

}

Answer 1

Для вызова метода вызова on() вам нужно создать экземпляр класса. Пытаться:

<Index eventemitter={new EventEmitter()} />