Estoy tratando de construir una barra que aparece después de cada 20 segundos y desaparece después de 5 segundos. Está funcionando, pero a menudo me da el error de nombre de classname en document.querySelector(".The_Bar").className = "The_Bar"; no existe Entonces, ¿hay alguna manera de improvisar esto?
const Bar = () => { React.useEffect(() => { const BarInterval = setInterval(() => { document.querySelector(".The_Bar").className = "The_Bar The_Bar_Show"; const BarTimeout = setTimeout(() => { document.querySelector(".The_Bar").className = "The_Bar"; }, 5000); return () => { clearTimeout(BarTimeout); }; }, 20000); return () => { clearInterval(BarInterval); setNumber({}); }; }, []) return ( <div className="The_Bar"> <div className="Text">You viewing this page</div> </div> ); }Primero, ¿por qué usa document.querySelector(".The_Bar").className en reaccionar?
Para esto tienes useRef .
En segundo lugar, si desea mostrar y luego eliminar un div, puede useState para cambiar dinámicamente. de esta manera controlas la clase usando ganchos de reacción que son más fáciles y "limpios"
const Bar = () => { const [showBar,setShowBar] = useState(false) React.useEffect(() => { const BarInterval = setInterval(() => { setShowBar(true) const BarTimeout = setTimeout(() => { setShowBar(false) }, 5000); return () => { clearTimeout(BarTimeout); }; }, 20000); return () => { clearInterval(BarInterval); setNumber({}); }; }, []) return ( <div className={showBar ? "The_Bar The_Bar_Show" : "No_Bar"}> <div className="Text">You viewing this page</div> </div> ); }Estilo No_Bar:
{ display:none; }No debe usar un enfoque tan imperativo para manipular DOM cuando usa React, intente lograr el mismo comportamiento de manera declarativa:
const Bar = () => { const [show, setShow] = useState(false); React.useEffect(() => { let interval; let timeout; interval = setInterval(() => { setShow(true); timeout = setTimeout(() => { setShow(false); }, 1000); }, 5000); return () => { clearInterval(interval); clearTimeout(timeout); }; }, []); return ( show && ( <div className="The_Bar"> <div className="Text">You viewing this page</div> </div> ) ); };Demostración https://stackblitz.com/edit/react-ehwj9c
Seleccionar elementos DOM con selectores en React nunca es una buena idea, React utiliza un DOM virtual para pintar DOM y lo hace de forma asíncrona, por lo que puede enfrentar todo tipo de errores y malas conductas al mezclar el código de vainilla imperativo con el código de React. Puede usar refs para acceder a los nodos DOM, pero eso también debe hacerse con mucho cuidado. En lugar de alternar imperativamente una clase como lo haría en Vanilla JS, simplemente alterne un estado React y use ese estado para alternar declarativamente una vista, o alternar un nombre de clase, ya que React State desencadena una nueva representación, esto asegura que todo suceda en el ritmo correcto