Reactjs 的事件管理器抛出"addHandler is not a function"

Question

我正在尝试使用 Reactjs 设置 UI，但是我收到一个错误，说addHandler和removeHandler不是一个函数。

以下代码位于名为 bridge.js 的文件中

// Global variable for describe on events from react components
var EventManager = {
  events: {},
  addHandler: function(eventName, handler) {
    if (eventName in this.events) {
      this.events[eventName].push(handler);
    } else {
      this.events[eventName] = [handler];
    }
  },
  removeHandler: function(eventName, handler) {
    if (eventName in this.events) {
      var index = this.events[eventName].indexOf(handler);
      this.events[eventName].splice(index, 1);
    }
  }
};
// Handle events from client
function trigger(eventName, args) {
  var handlers = EventManager.events[eventName];
  handlers.forEach(handler => handler(JSON.parse(args)));
}
module.exports = { trigger: trigger };

在这里，我尝试利用事件管理器来侦听带有 eventName updateCharacterInfo 的trigger，但它抛出了异常。

import React, { Component } from "react";
import EventManager from "../bridge";
class Leftbar extends Component {
  state = {
    status: "",
    firstname: "",
    {...}
  };
  componentDidMount() {
    EventManager.addHandler(
      "updateCharacterInfo",
      this.updateCharacterInfo.bind(this)
    );
  }
  componentWillUnmount() {
    EventManager.removeHandler("updateCharacterInfo", this.updateCharacterInfo);
  }

Answer 1

根据评论中的信息，您似乎正在执行命名导出，但随后是默认导入。您需要使用命名导入来匹配导出，方法是将名称括在大括号中：

import { EventManager } from "../bridge"

Answer 2

首先应该导出然后导入数据

  export var EventManager = {
  events: {},
  addHandler: function(eventName, handler) {
    if (eventName in this.events) {
      this.events[eventName].push(handler);
    } else {
      this.events[eventName] = [handler];
    }
  },
  removeHandler: function(eventName, handler) {
    if (eventName in this.events) {
      var index = this.events[eventName].indexOf(handler);
      this.events[eventName].splice(index, 1);
    }
  }
};
// Handle events from client
export function trigger(eventName, args) {
  var handlers = EventManager.events[eventName];
  handlers.forEach(handler => handler(JSON.parse(args)));
}

用于在组件中导入

import { EventManager, trigger } from "../bridge";