React中<h1>渲染时如何重置页面焦点？

核心思路 #

要让Tab键从<h1>之后的可聚焦元素开始，关键是在<h1>后设置一个仅用于锚定焦点的不可见元素，待<h1>渲染完成后聚焦这个元素，浏览器的Tab顺序就会从它的下一个可聚焦元素开始。

具体实现步骤 #

• 在<h1>标签后添加隐藏的锚点元素：

<h1 id="page-title">新页面标题</h1>
<div id="focus-anchor" tabindex="-1" style="position:absolute; left:-9999px; top:auto;"></div>

• tabindex="-1"：允许通过JS聚焦，但不会被Tab键直接选中

• 样式设置：绝对定位到可视区域外，避免影响页面布局和视觉效果

• 当<h1>渲染完成后，聚焦这个锚点元素：

// 原生JS示例
document.addEventListener('DOMContentLoaded', function() {
  const focusAnchor = document.getElementById('focus-anchor');
  if (focusAnchor) {
    focusAnchor.focus();
  }
});

// React函数组件示例
useEffect(() => {
  const focusAnchor = document.getElementById('focus-anchor');
  if (focusAnchor) {
    focusAnchor.focus();
  }
}, []); // 依赖项根据实际渲染触发条件调整

注意事项 #

不要直接给<h1>设置tabindex来聚焦：如果设tabindex="0"，Tab键会先选中<h1>，不符合需求；设tabindex="-1"再聚焦的话，Tab键的下一个元素还是页面最开头的可聚焦元素，无法达到重置顺序的目的，所以必须用专门的锚点元素承接焦点。

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