0

我有一个使用反应钩子注册热键的组件：useMousetrap。

这是捕鼠器库的钩子包装器。

这是组件：

const MyComponent = ({ name }) => {
    const sayHi = () => {
        alert(`Hello from Component ${name}`);
    };

    useMousetrap('x', sayHi);

    return (
        <div>
            Component {name}
        </div>
    );
};

当我在其他组件或页面中实现该组件时，一切正常。但现在说我想在同一页面上有两个组件：

<div>
    <MyComponent name="A" />
    <MyComponent name="B" />
</div>

现在两个组件都尝试注册热键。似乎总是在文档流中稍后出现的那个成功。因此，如果我在上面的示例中按下x，警报会显示Hello from Component B.

有没有办法确保只有一个组件是曾经的active？我正在考虑根据视图中的组件注册和取消注册这些热键，但是useMousetrap作为一个钩子似乎使条件逻辑变得相当困难。我在这里有点困惑。

有没有一种快速简便的方法可以有条件地打开/关闭热键？

4

0 回答 0