Hola, estoy tratando de a todas las etiquetas dentro #header-nav
const HeaderNav = (props) => { // setState const $target = useRef(null); const $component = $target.current.querySelectorAll('a'); return ( <nav id='header-nav' ref={$target}> <div id='shortcuts'> <a className='resources' href='#'> <span>0</span> <WidgetsIcon /> </a> <a className='trash' href='#'> <DeleteSweepIcon /> </a> <a className='history' href='#'> <RestoreIcon /> </a> </div> </nav>)} pero ejecutar querySelectorAll en Ref.current no funciona
const $target = useRef(null); const $component = $target.current.querySelectorAll('a'); Devuelve nulo, probablemente porque querySelectorAll se refiere a nodos en vivo que aún no se han renderizado Además, dado que tengo muchas etiquetas (como 20), poner varias referencias diferentes y crear una matriz de referencias no parece la mejor solución.
¿Cómo puedo atravesar el resultado de referencia interior?
Deberíamos poner el resultado useRef dentro del gancho useEffect
const $target = useRef(); useEffect(() => { const $component = $target.current.querySelectorAll('a'); }, []);