将 vanilla JS 对象作为 prop 传递给子组件

Question

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

在message.js中，我定义了两个class； Message class 和另一个名为 EventEmit 的 class。我的消息 class 有一个渲染函数，需要能够将 EventEmit 对象作为 prop 传递给子组件。

在子组件 (main.js) 中，我尝试通过以下方式访问 EventEmit 对象：

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

调试时，如果我停在上面引用的第二行，我可以输入 'eventemitter' 并返回一个对象，我可以看到 .on() 方法。

但是，当该行执行时，我在控制台收到 'eventemitter.on' is not a function 错误。任何建议将不胜感激。

下面的代码

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()，您需要实例化class。尝试：

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

将 vanilla JS 对象作为 prop 传递给子组件

Passing vanilla JS object as prop to a child component

javascript

eventemitter

ecmascript-6

reactjs