Javascript 以编程方式对元素进行聚焦

我有以下代码

const App = () => {
   const mainContentRef = useRef(null);
   return <div>
       <button onClick={() => mainContentRef.current?.focus()}></button>
       <div ref={mainContentRef}> {...applicationContent}</div>
    </div>
}

然而，由于某些原因，忽略了当前元素上存在的ref和focus函数，main content div从未得到关注

---

为了问这个问题，这段代码被简化了，但是我的最终目标是为了便于访问而构造一个跳过链接。

解决了这个问题，我们能够通过将tab index设置为大于或等于0的数字来获得DIV元素的焦点。

您如何检查DIV是否被聚焦？因为他们通常没有任何视觉指示。为了帮助我们帮助您，您是否可以使用[]工具栏按钮上的堆栈代码片段来更新您的问题？堆栈代码段支持React，包括JSX。我的div上有一个onFocus回调，以检查它是否正在聚焦。但是我发现了这个问题，这是因为我的内容没有tabIndex。将其设置为>=0似乎可以修复我的IssueEyeP，这样就可以了。默认情况下，div不可聚焦。