Estoy trabajando en acordeón en reactjs. cuando visito el sitio por primera vez o cuando actualizo. mi acordeón no funciona en absoluto. pero durante el desarrollo cuando realizo cambios en useEffect que lo vuelven a renderizar. empieza a funcionar bien. por ejemplo, durante el desarrollo, si abro el sitio en localhost y mientras ya está abierto, si agrego un comentario en useEffect, comienza a funcionar
useEffect(() => { const accordins = document.querySelectorAll('.accordings .item'); console.log("asdf"); for (let i=0;i<accordins.length;i++) { accordins[i].addEventListener('click',function(){ let allactive = document.querySelectorAll('.accordings .item.active'); for(let j=0;j<allactive.length;j++){ if(allactive[j] !== accordins[i]) { allactive[j].classList.remove('active'); } } this.classList.toggle("active"); }) } }, [])Lea la documentación del gancho de efectos: https://reactjs.org/docs/hooks-effect.html El gancho (con la condición []) solo se ejecuta como componentDidMount que no es equivalente al componente renderizado. Esto significa que es probable que las entidades que está buscando aún no se hayan representado.
Recomiendo echar un vistazo a useLayoutEffect ( https://reactjs.org/docs/hooks-reference.html#uselayouteffect ) que se activa después de todas las mutaciones DOM.