如何用react-hotkeys-hook跨Linux、macOS、Windows实现平台专属快捷键？

React Hook的规则明确要求不能在条件判断、循环或嵌套函数中调用Hook，所以你原来的写法会触发Hook调用规则错误。以下是两种可行的解决思路：

思路一：动态生成快捷键组合，单次调用useHotkeys #

先根据当前平台判断出对应的快捷键字符串，再统一传给useHotkeys，避免条件包裹Hook调用：

import { useHotkeys } from 'react-hotkeys-hook';
import { isWindows, isMacOs, isLinux } from 'react-device-detect';

// 根据平台匹配对应的快捷键组合
const targetHotkey = (isWindows || isLinux) 
  ? 'ctrl+shift+1' 
  : isMacOs 
  ? 'meta+alt+1' 
  : ''; // 非目标平台可留空，后续通过enabled控制是否启用

useHotkeys(
  targetHotkey,
  () => {
    // 执行你的业务逻辑
  },
  { 
    enableOnFormTags: true, 
    preventDefault: true,
    enabled: !!targetHotkey // 确保无有效快捷键时不启用监听
  }
);

思路二：封装自定义Hook，批量处理多平台快捷键 #

如果你的应用有大量快捷键需要适配不同平台，可以封装一个自定义Hook来复用逻辑，减少重复代码：

import { useHotkeys } from 'react-hotkeys-hook';
import { isWindows, isMacOs, isLinux } from 'react-device-detect';

const usePlatformHotkeys = (hotkeyConfig, handler, options = {}) => {
  // 识别当前平台类型
  const platform = (isWindows || isLinux) ? 'winLinux' : isMacOs ? 'mac' : null;
  // 获取对应平台的快捷键
  const hotkey = platform ? hotkeyConfig[platform] : '';

  return useHotkeys(hotkey, handler, {
    ...options,
    enabled: !!hotkey // 只有存在有效快捷键时才启用监听
  });
};

// 调用示例
usePlatformHotkeys(
  {
    winLinux: 'ctrl+shift+1',
    mac: 'meta+alt+1'
  },
  () => {
    // 执行你的业务逻辑
  },
  { enableOnFormTags: true, preventDefault: true }
);

这两种方式都严格遵守了React Hook的调用规则，同时实现了不同平台快捷键的差异化配置。

内容的提问来源于stack exchange，提问作者Kim