【问题标题】:Importing Mousetrap in React project - Cannot read property 'bind' of undefined在 React 项目中导入捕鼠器 - 无法读取未定义的属性“绑定”
【发布时间】:2025-12-27 11:25:11
【问题描述】:

我正在尝试将捕鼠器导入到反应项目中以进行一些简单的键盘绑定。我通过纱线安装了捕鼠器。我没有任何导入错误,但是当我尝试使用 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 和其他几个库,而且我对它们都很陌生。任何建议都会有所帮助。

【问题讨论】:

    标签: javascript reactjs import mobx mousetrap


    【解决方案1】:

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

    import * as Mousetrap from 'Mousetrap';
    

    【讨论】:

    • 优秀。做到了。我在文档中可能遗漏了什么可以表明这一点吗?我一直在经历这个craig.is/killing/mice
    • 文档中没有任何内容,因为可能是在命名导入/导出之前编写的,只需查看主条目文件以了解其实现方式
    最近更新 更多