React useId生成无效选择器，如何通过ID获取元素？

问题原因 #

useId生成的ID会包含冒号等特殊字符（如:Rt6m:），而querySelector依赖的CSS选择器语法中，ID选择器（#xxx）不允许这类特殊字符直接作为选择器的一部分，导致解析失败抛出错误。

解决方案 #

方法1：使用document.getElementById()（推荐）

getElementById直接根据ID字符串精确匹配元素，不需要解析CSS选择器，完全不受特殊字符影响，是最简便的解决方式。

修改后的代码：

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

  useEffect(() => {
    const myComponentDOMElement = document.getElementById(myId); // 替换为getElementById
  }, [myId]) // 添加依赖项myId，确保ID更新时重新执行

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

方法2：转义特殊字符后使用querySelector

如果必须使用querySelector，需要对ID中的特殊字符进行CSS选择器转义（比如把冒号:替换为\\:），但这种方式需要处理所有可能的特殊字符，效率低于第一种方法。

示例代码：

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

  useEffect(() => {
    // 转义CSS选择器中的特殊字符
    const escapedId = myId.replace(/[:\\.#\[\]()*+?^$]/g, '\\$&');
    const myComponentDOMElement = document.querySelector(`#${escapedId}`);
  }, [myId])

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

内容的提问来源于stack exchange，提问作者Yevhenii Shlapak