开发一个自定义Hook，用于管理组件的焦点状态。如何在Hook中使用Ref和回调refs，并确保类型安全？

最新推荐文章于 2025-06-10 17:43:56 发布

极客前端探索者

最新推荐文章于 2025-06-10 17:43:56 发布

阅读量366

点赞数 3

分类专栏：前端场景面试题-TypeScript篇文章标签： javascript typescript 前端 ecmascript 数据库

本文链接：https://blog.youkuaiyun.com/weixin_44714345/article/details/140207277

版权

在React中，开发一个自定义Hook来管理组件的焦点状态通常涉及使用useRef来存储对DOM元素的引用，并可能包括在特定条件下自动聚焦元素的功能。同时，我们也可以通过回调Refs的方式来传递Ref到子组件中，尤其是在你需要管理那些不是直接渲染的DOM元素的焦点时。下面是如何实现这样一个自定义Hook的例子，同时确保类型安全：

文末有我帮助400多位同学成功领取到前端offer的面试综合题哦，包含了工程化，场景题，八股文，简历模板，等等

自定义Hook: useFocusManagement

首先，我们定义一个自定义Hook useFocusManagement，它将处理聚焦逻辑，并允许外部通过回调Refs传递或获取DOM元素的引用。

import { useState, useEffect, useRef, RefCallback } from 'react';

type FocusManagementOptions = {
  shouldFocus?: boolean;
  focusOnMount?: boolean;
};

function useFocusManagement(options: FocusManagementOptions = {}) {
  const { shouldFocus = true, focusOnMount = true } = options;
  const [isFocused, setIsFocused] = useState(false);
  const focusRef &#