javascript - 在 React 项目中导入捕鼠器 - 无法读取未定义的属性 'bind'

Question

我正在尝试将捕鼠器导入 React 项目以实现一些简单的键盘绑定(bind)。我通过 yarn 安装了捕鼠器。我没有任何导入错误，但是当我尝试使用 Mousetrap 库对象时它是未定义的。这是来 self 的主要 App.tsx 组件

import Mousetrap from 'Mousetrap';

export default class App extends React.Component {
componentDidMount() {
    Mousetrap.bind(['left'], dataStore.pagination.prev());
    Mousetrap.bind(['right'], dataStore.pagination.next());
}

componenentDidUnmount() {
    Mousetrap.unbind('left', dataStore.pagination.prev());
    Mousetrap.unbind(['right'], dataStore.pagination.next());
}

public render() {

这是我遇到的错误。 error

我也尝试启动一个 Mousetrap 对象来使用，但我收到了这个错误(而且文档中没有任何内容说我需要这样做)。

const mousetrap: Mousetrap = new Mousetrap();

error

我正在使用 react、typescript、mobx、material-ui 和其他几个库，我对所有这些库都很陌生。任何建议都会有所帮助。

Answer 1

Mousetrap 没有命名导出，因此您的命名导入语句将导致 undefined。您可以使用以下方法导入库:

import * as Mousetrap from 'Mousetrap';