Bug: Use useId function to generate dom id,it can't use document.querySelector function. about react

[Zywz95]

OK.looks it's been fixed.thanks.

[Zywz95]

@pwbriggs @bonelessgalaxy
Thank you for your answer. I have now fixed my CodeSandbox link to be publicly accessible, which indeed can solve my problem. What I am expecting is that the ID generated directly by the useId method should not need escaping and can be used directly. Although this approach does solve my problem, I still believe there are compatibility issues because using the character ':' in a DOM id is not a common practice. Regardless, thank you for your response.

[pwbriggs]

Hey there @Zywz95! 👋

I'm not sure I understand the problem you're experiencing. Can you tell me

1. What do you expect to happen?
2. Why are you trying to use document.querySelector directly? Is it possible to write the logic within the component itself (perhaps within an effect)?

I can't seem to access your Code Sandbox repro, maybe you need to change its permissions to publicly viewable?

Thanks! ❤️

[unknowablesymbol]

Hi @Zywz95, I think you're running into the same issue as #27553
It's because the reserved character : has special meaning in CSS for pseudo-classes and needs to be escaped.
Thankfully, there's a built-in method for this: CSS.escape(selector: string).

Something like this should work for your case!

document.querySelector(`#${CSS.escape(":r1:")}`)

[pwbriggs]

@bonelessgalaxy: true.

That said, @Zywz95, be careful about hardcoding the value :r1:—there's no guarantee that useId always return that. I'd do something more like this:

import { useEffect, useId } from "react";

function MyComponent() {
  const id = useId(); // 👈 Put it in a variable

  useEffect(() => {
    const element = document.querySelector(`#${CSS.escape(id)}`);
    // Do something with `element`
  }, [id]);

  return <div id={id}>Hello world!</div>;
}

[pwbriggs]

Yeah, I agree the : makes everything more complicated. There's an ongoing discussion about this at #26839, so I think we can close this issue.