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 的

useId

生成的 ID 被冒号包围（例如

:R1ab6km:

），这些特殊字符由

querySelector

解释。您可以使用

CSS.escape()

转义它们，以便

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>
}

Answer 3

如果您知道自己正在使用 ID，则可以仅使用

document.getElementById(id)

而不是

document.querySelector('#' + CSS.escape(id))

。