Creé un sitio web usando React (sin HTML) y dividí cada página en componentes más pequeños. Digamos que tengo por ejemplo la página principal, y en el primer componente (la sección principal que se encuentra en la parte superior de la página) tengo un botón, y cuando le doy clic quiero que me lleve al último componente de la página (que se encuentra en la parte inferior). Quiero algo similar al HTML "al hacer clic en desplazarse al elemento ID".
¿Cómo puedo lograr eso? Tenga en cuenta que para cada componente he creado un archivo js separado.
¡Gracias!
Puedes lograrlo usando ganchos de reacción. Tienes que refactorizar un poco el último componente, como para reenviar una ref . Puede exponer el método de desplazamiento en LastComp con el gancho useImperativeHandle .
import { useImperativeHandle, forwardRef, useRef } from "react"; const LastComp = forwardRef((props, ref) => { const compRef = useRef(); useImperativeHandle(ref, () => ({ scrollIntoView: () => { compRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); } })); return ( <div style={{ height: "600px", backgroundColor: "gray" }} ref={compRef}> Body of the last component </div> ); }); export default LastComp; En FirstComp, puede pasar la referencia como refToLastComp y llamar al método que expusimos en LastComp .
const FirstComp = ({ refToLastComp }) => { const scrolltoLast = () => { if (refToLastComp.current) { refToLastComp.current.scrollIntoView(); } }; return ( <div style={{ height: "600px", backgroundColor: "tomato" }} > <button onClick={scrolltoLast}>Scroll to Last</button> First </div> ); }; export default FirstComp; En la página principal, puede crear y pasar una nueva referencia a LastComp y FirstComp .
import { useRef } from "react"; import FirstComp from "./FirstComp"; import SecondComp from "./SecondComp"; import LastComp from "./LastComp"; export default function Main() { const ref = useRef(null); return ( <> <FirstComp refToLastComp={ref} /> <SecondComp /> <LastComp ref={ref} /> </> ); }No importa dónde se encuentre el componente, puede estar en cualquier parte de la página de inicio. cuando hace clic en el botón, se desplazará al componente para ver (usando scrollIntoView ).
Agregar enlace al elemento de la página
<Link to="/page#elementid">Go</Link>Haz esto, en el componente de tu página
componentDidMount() { let target = window.location.hash; target && document.querySelector(target).scrollIntoView() }tienes que nombrar cada componente por identificación única.
let scroll_to = document.getElementById("conponent_id").offsetTop; window.scrollTo({ comportamiento: "suave", arriba: scroll_to, });
botón onclick solo ejecuta este código