React useId 创建无效的选择器

我正在尝试通过 id 获取元素。 （这是重现错误的示例代码）

function MyComponent(){
  const myId = useId();

  useEffect(() => {
    const myComponentDOMElement = document.querySelector(`#${myId}`); // error here
    }
  )

  return <div id={ myId }> text </div>
}

这段代码给出了一个错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#:Rt6m:' is not a valid selector.

useRef 在我的情况下无法帮助我。如何使用 ID 来获取元素。

由 React 生成的 IDuseId由冒号包围（例如:R1ab6km:）并且这些特殊字符被解释为querySelector。你可以使用以下命令来逃避它们CSS.escape()以便querySelector按字面意思对待这些字符。

document.querySelector(`#${CSS.escape(id)}`)