0
159
ViewsQueryselector devuelve nulo para un elemento existente en React
No estoy seguro de por qué esta línea de código devuelve un error, pero he pasado horas en ello y todavía tengo que entender por qué. Tengo un elemento div en la barra de navegación con una clase de módulo que no tiene ninguna propiedad modificada dentro del archivo CSS, es solo un bloque. (He usado una clase de módulo que tiene propiedades cambiadas dentro del archivo CSS pero el error persiste). Lo probé con una clase regular y Queryselector encontró el elemento, pero en este proyecto necesito usar módulos. ¿Alguien puede ayudarme a entender por qué este Queryselector devuelve nulo cuando intenta acceder al elemento div?
const Nav = () => { useEffect(() => { // console.log(document.querySelector('.testing')) window.addEventListener('click', (e) => { // console.log(document.querySelector('.testing')) if(document.querySelector(`.${styles.testing}`).contains(e.target)){ // is not able to find the element with the className 'testing' // irrelevant code here } }) }, []) return ( <> <div className={`${styles.user_interaction_container} ${styles.list}`}> <a href="https://www.google.com/"> <img src={search} alt="Search" width="16px" height="16px"></img> </a> <a href="https://www.google.com/"> <img src={heart} alt="Liked" width="16px" height="16px"></img> </a> <a href="https://www.google.com/"> <img src={cart} alt="Cart" width="16px" height="16px"></img> </a> </div> <div className={styles.testing}> <img src={menu} alt="Menu" width="20px" height="20px"></img> </div> </> ) } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.2/react-dom.min.js"></script> 
Lo que no entiendo es cómo puede encontrar otros elementos con el mismo nombre pero no puede acceder a esta clase específica.
Cualquier ayuda sería muy apreciada