Question

我编写了一个类来模拟进入我的应用程序的消息，称为message.js

在message.js中，我定义了两个类。 Message类和另一个称为EventEmit的类。我的Message类具有一个render函数，该函数需要能够将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()} />

将香草JS对象作为道具传递给子组件

1 个答案: