• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

186
Vistas
ReactJS: vaya al enlace de anclaje en HTML con reaccionar enrutador dom solo después de que se cargue la página completa

Tengo una aplicación React con URL definidas con React Router:

 const App: React.FC = (): JSX.Element => { return ( <Router> <Switch> <Redirect exact from="/" to="/rules" /> <Route exact path={["/rules", "/rules/:placeId"]} component={LandingPage} /> <Route exact path={["/route", "/route/:start/:end"]} component={RoutePage} /> </Switch> </Router> ); };

Quiero permitir que el usuario vaya a un acordeón específico del documento si la URL contiene una parte hash como esta /rules/someplace#accordion-3

Tengo un componente que devuelve los acordeones en cuestión, todos los cuales tienen una identificación:

 const CategoryDisplay: React.FC<Props> = (props) => { ... return ( <> <Accordion id={`category-${accordion.id}`}/> </> ); }; export default CategoryDisplay;

Y cuando abro una URL con un ancla como /rules/someplace#accordion-3 mientras ya estoy en la página, todo funciona bien y se desplaza al elemento. Sin embargo, en la carga inicial de la página, este comportamiento no funciona.

¿Cómo haría para desplazarme hasta el elemento solo después de que se haya cargado la página?

over 2 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Creo que la idea sería usar un efecto para desplazarse al componente apropiado después de que se monte el componente. Tal vez algo como esto:

 React.useEffect(() => { const anchor = window.location.hash.slice(1); if (anchor) { const anchorEl = document.getElementById(anchor); if (anchorEl) { anchorEl.scrollIntoView(); } } }, []);

Notas:

  • No he probado esto.
  • useLayoutEffect en lugar de useEffect puede brindar una mejor experiencia aquí; ver este artículo para más detalles.
  • Estoy pasando por alto React y usando el DOM. Por lo general, trato de evitar eso, pero dado que esta lógica está aislada e intrínsecamente enfocada en el comportamiento del DOM del navegador, creo que este es un buen caso de uso (en lugar de complicar el código al generar más interacciones con sus componentes React).
  • scrollIntoView es conveniente pero experimental ; considere usar el paquete NPM scroll-into-view-if-needed en su lugar.
over 2 years ago · Juan Pablo Isaza Denunciar

0

No se si entendí bien.

Creo que deberías hacer una función para esperar que todo se complete.

pero, si no puede captar exactamente el tiempo cuando todo está bien, puede usar el truco.

ejemplo :

 const CategoryDisplay: React.FC<Props> = (props) => { ... const [accordionId, setAccordionId] = useState(""); useEffect(()=>{ // this component mounted ... setTimeout(()=>{ // do something setAccordionId(`category-${accordion.id}`); },0); }, []); return ( <> <Accordion id={accordionId}/> </> ); };

Esto definitivamente se ejecutará en el marco después de montar el componente.

over 2 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda