简单地清理这些代码就足够了：

<h1 id="h1" tabindex="-1">Component 1</h1>

接着是

h1.focus()

发布的代码中有很多错误，这可能会导致屏幕阅读器出现问题。
最重要的是，它改变了H1的角色。大多数屏幕阅读器用户依靠查找标题来定位和导航。例如，有一些快捷方式可以帮助直接跳转到H1。
由于焦点已移到标题，因此不需要alert。它将在焦点上发布。
一个<fieldset> is for forms并且需要一个可访问的名称。它在这里是无效的。

如何应对？

要聚焦一个元素，需要访问呈现的DOM。因此，将ref属性与useRef()一起使用

function MyComponent() {
  const h1Ref = useRef(null);

  useEffect(() => {
    h1Ref.current.focus();
  }, []);

  return <h1 ref={h1Ref} tabIndex={-1} />;
}