在React项目中导入Mousetrap - 无法读取未定义

Question

我正在尝试将鼠标捕捉导入反应项目以进行一些简单的键盘绑定。我通过纱线安装了Mousetrap。我没有导入任何错误，但是当我尝试使用它时，Mousetrap库对象是未定义的。这是我的主要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';