Tengo una barra de navegación con dos partes (navbarTop y navbarBottom); navbarTop se mostrará cuando el scrollY sea mayor que 110 y navbarbottom se mostrará cuando el usuario se desplace hacia arriba, pero mi problema es que cada componente se volverá a llamar después de cada desplazamiento, incluso al desplazarse hacia abajo, o cuando el navbottom ya existe y el usuario desplácese hacia arriba y seguirá llamando al componente. aquí está el código:
const Navbar: FC = () => { const [stickyHeader, setStickyHeader] = useState(false); const [stickyMenu, setStickyMenu] = useState(false); console.log('navbar') const [y, setY] = useState(null); const handleNavigation = useCallback( (e) => { const window = e.currentTarget; if (!stickyMenu) { if (y > window.scrollY) { setStickyMenu(true) // console.log("scrolling up"); } } if (!stickyHeader) { if (window.scrollY >= 110) { setStickyHeader(true); } } if (stickyHeader) { if (window.scrollY <= 110) { setStickyHeader(false); } } if (stickyMenu) { if (y < window.scrollY) { setStickyMenu(false) // console.log("scrolling down"); } } setY(window.scrollY); }, [y, stickyMenu,stickyHeader] ); useEffect(() => { window.addEventListener("scroll", handleNavigation); return () => { window.removeEventListener("scroll", handleNavigation); }; }, [handleNavigation, stickyMenu]); return ( <> <div className={s.root}> {stickyHeader === false ? ( <div className='hidden xl:block md:w-auto'> <NavbarTop sticky={false}/> <NavbarBottom sticky={false}/> </div> ) : ( <div className='absolute hidden xl:block md:w-auto'> <NavbarTop sticky={true}/> {stickyMenu && <NavbarBottom sticky={true}/> } </div> )} <SmallNav/> </div> </> )} exportar barra de navegación predeterminada
La verdad es que no entendí muy bien tu pregunta. Dijiste que cada componente se vuelve a llamar después de cada pergamino. Por supuesto que será recordado, ¿verdad?
Cada vez que te desplazas, cambias stickyHeader o stickyMenu . React escucha el cambio de estado y vuelve a renderizar el componente. Así es como funciona React.
Veo que estás usando tailwindcss.
Puede usar un useMemo para escuchar el estado y luego devolver la clase apropiada según los diferentes estados del estado. De esta manera, evita tener que crear nodos DOM una y otra vez. No sé si esto te ayudaría o no. Espero que esto ayude.
const Navbar: FC = () => { const [stickyHeader, setStickyHeader] = useState(false); const [stickyMenu, setStickyMenu] = useState(false); // console.log('navbar'); const [y, setY] = useState(null); const handleNavigation = useCallback( (e) => { const window = e.currentTarget; if (!stickyMenu) { if (y > window.scrollY) { setStickyMenu(true); // console.log("scrolling up"); } } if (!stickyHeader) { if (window.scrollY >= 110) { setStickyHeader(true); } } if (stickyHeader) { if (window.scrollY <= 110) { setStickyHeader(false); } } if (stickyMenu) { if (y < window.scrollY) { setStickyMenu(false); // console.log("scrolling down"); } } setY(window.scrollY); }, [y, stickyMenu, stickyHeader], ); useEffect(() => { window.addEventListener('scroll', handleNavigation); return () => { window.removeEventListener('scroll', handleNavigation); }; }, [handleNavigation, stickyMenu]); const stickyClassName = useMemo(() => { if (stickyHeader) { return 'sticky top-0 xl:block md:w-auto'; } return 'xl:block md:w-auto'; }, [stickyHeader]); return ( <div className="test" style={{ height: 2000 }}> <div className={stickyClassName}> <NavbarTop sticky={stickyHeader} /> {stickyMenu && <NavbarBottom sticky={stickyHeader} />} </div> <div>SmallNav</div> </div> ); }; export default Navbar;