0
182
VistasEl componente importado de React no funciona completamente
Soy realmente nuevo en React y he estado intentando durante algún tiempo hacer una función de desplazamiento hacia arriba. Utilizando los tutoriales existentes y todo lo que hay en Google, he creado este componente:
Import React, { useState, useEffect } from "react"; export default function ScrollToTop() { const [isVisible, setIsVisible] = useState(false) const toggleVisibility = () => { if(window.pageYOffset > 300) { setIsVisible(true); } else { setIsVisible(false); } }; const ScrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; useEffect(() => { window.addEventListener('scroll', toggleVisibility); return () => { window.removeEventListener('scroll', toggleVisibility); }; }, []); if (!isVisible) { return false } return ( <button className="button" onClick={ScrollToTop}> <div className="button__arrow button__arrow--up"></div> </button> ) };el problema es que cuando lo importo en App.js no funciona correctamente, la parte de desplazamiento funciona perfectamente, pero el botón permanece en la parte inferior de la página en lugar de aparecer después de una cierta cantidad de desplazamiento. Esta es la aplicación.js:
return ( <div> {loading ? ( <h1>Loading...</h1> ) : ( <> <Navbar /> <div className="Grid-container"> {pokemonData.map((pokemon, i) => { return <Card key={i} pokemon={pokemon} />; })} </div> <ScrollToTop/> </> )} </div> ); }1 Respuestas
Responde la pregunta0
No veo ningún problema evidente en su implementación de ScrollTop que pudiera causar que el botón de desplazamiento hacia arriba permanezca en la página incluso después de desplazarse hacia arriba, pero sí veo espacio para la optimización.
- Para eventos
onScroll, es mejor usar oyentes pasivos. - Invoque
toggleVisibilityuna vez inmediatamente en el montajeuseEffectpara garantizar un estado inicial adecuado. - Aplique Boolean Zen al conmutador de visibilidad; Actualice el estado
isVisiblecon el resultado de la comparación booleana. - Simplemente represente condicionalmente el botón en un solo retorno.
Código:
function ScrollToTop() { const [isVisible, setIsVisible] = useState(false); const toggleVisibility = () => { setIsVisible(window.pageYOffset > 300); }; const ScrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; useEffect(() => { toggleVisibility(); window.addEventListener("scroll", toggleVisibility, { passive: true }); return () => { window.removeEventListener("scroll", toggleVisibility, { passive: true }); }; }, []); return isVisible ? ( <button className="button" onClick={ScrollToTop}> <div className="button__arrow button__arrow--up">TOP</div> </button> ) : null; } 
Si aún tiene problemas con su implementación y uso, intente crear un código y un cuadro que reproduzca el problema que podemos inspeccionar y depurar en vivo.