React中如何用useRef替代getElementById实现组件内Header聚焦？

完全可行，而且这种方式更贴合React的组件化设计，还能规避全局ID重复的潜在问题。具体实现分三步：

1. 修改自定义Hook，接收ref作为参数 #

把原来接收elementID的Hook改成接收React的RefObject，直接通过ref访问目标元素，无需全局查找：

import { useEffect } from 'react';

const useFocusOnElement = (elementRef: React.RefObject<HTMLElement>) => {
  useEffect(() => {
    // 组件卸载时聚焦目标元素
    return () => {
      elementRef.current?.focus();
    };
  }, [elementRef]); // 添加ref到依赖数组，确保引用更新时effect能响应
};

2. 在父组件中创建ref并传递给Header和Hook #

在调用Hook的页面组件里创建ref，同时把这个ref传递给Header组件，再传入自定义Hook：

import { useRef } from 'react';
import Header from './Header';
import useFocusOnElement from './useFocusOnElement';

const PageComponent = () => {
  // 创建指向header元素的ref
  const headerRef = useRef<HTMLElement>(null);
  
  // 将ref传入Hook
  useFocusOnElement(headerRef);

  return (
    <div>
      {/* 把ref传递给Header组件 */}
      <Header headerRef={headerRef} />
      {/* 页面其他内容 */}
    </div>
  );
};

3. 修改Header组件，绑定父组件传递的ref #

让Header组件接收父组件传来的ref，并绑定到<header>元素上：

// 定义Header组件的props类型
type HeaderProps = {
  headerRef: React.RefObject<HTMLElement>;
};

const Header = ({ headerRef }: HeaderProps) => {
  return (
    <header 
      id="header" 
      tabIndex="-1" 
      ref={headerRef} // 使用父组件传递的ref
    >
      {/* Header内部内容 */}
    </header>
  );
};

export default Header;

补充说明 #

• 保留tabIndex="-1"是正确的，这样元素可以通过代码触发聚焦，但不会被Tab键遍历到，符合无障碍设计规范。
• 把elementRef加入effect的依赖数组，确保当ref引用发生变化时（虽然一般ref对象本身是稳定的，但极端场景下父组件重新创建ref时），effect能正确执行。
• 这种方式完全脱离了全局DOM查找，所有操作都在React的组件上下文内完成，更安全也更符合React的设计理念。

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