将 vanilla 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”不是函数错误。任何建议将不胜感激。

代码如下

消息.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()} />