React useId 创建无效的选择器

Question

我正在尝试通过 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 来获取元素。

Answer 1

React 生成的 IDuseId被冒号包围（例如:R1ab6km:），这些特殊字符由 解释querySelector。您可以使用CSS.escape()so that 按querySelector字面意思处理这些字符来转义它们。

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

Answer 2

我发现我可以使用属性选择器。

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

  useEffect(() => {
    const myComponentDOMElement = document.querySelector(`[id="${myId}"]`); // this will work
    }
  )
  return <div id={ myId }> text </div>
}