React加载后为div设置focus失效，useRef调用focus无响应如何解决

问题根因 #

• 你当前的useEffect未添加依赖数组，执行时机不符合预期，且HotKeys组件对内部子元素的渲染有额外处理，你拿到ref时DOM可能还未完全插入文档流，此时调用focus无效
• 手动触发后焦点丢失，大概率是热键库本身的焦点处理逻辑、或项目其他全局逻辑抢占了焦点

解决方案 #

1. 调整useEffect依赖与执行时机，添加延迟确保DOM完全挂载

const focusRef = useRef(null);

useEffect(() => {
  if (!isActive) return;
  // 放入宏任务队列，等待所有同步渲染逻辑执行完成后再触发聚焦
  const timer = setTimeout(() => {
    focusRef.current?.focus?.();
  }, 0);
  // 清理定时器避免内存泄漏
  return () => clearTimeout(timer);
// 仅isActive状态变更时触发该逻辑
}, [isActive]);

2. 关闭热键库的默认焦点处理逻辑
   如果你使用的是react-hotkeys，给<HotKeys>标签添加noWrap={true}、ignoreEvents={false}配置，避免库内部修改焦点；如果是其他热键库，查找对应关闭自动焦点抢占的配置项即可。
3. 若仍无效，可改用回调ref兜底，在DOM节点挂载时直接触发聚焦

const handleRefMount = useCallback((domNode) => {
  if (domNode && isActive) {
    domNode.focus();
  }
}, [isActive]);

// 渲染时绑定回调ref
return (
  isActive ?
    <HotKeys ...>
      <div ref={handleRefMount} tabIndex={-1} ...>...</div>
    </HotKeys>
    : <div ...>...</div>
)

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