Estoy usando un <NavLink /> para dirigir la navegación a un componente específico. Estoy pensando que este es el problema, pero el problema es:
Estoy tratando de tener un elemento enfocado cuando se cumple la ruta y se procesa el componente. El enfoque existente que tengo funciona de alguna manera: el desplazamiento funciona (es decir, el elemento que quiero enfocar está cerca de la parte inferior y el desplazamiento automático funciona. Sin embargo, el cuadro de enfoque no está allí). Sin embargo, cuando actualizo, funciona como se desea: el foco tiene la funcionalidad de desplazamiento y hay un cuadro resaltado alrededor del elemento.
No estoy seguro de cuál es el problema, pero creo que es el hecho de que el componente obtiene su representación inicial del <NavLink /> .
Así es como estoy usando el enfoque:
import React, { useEffect, useRef } from "react"; const Focus = () => { const focusRef = useRef(null); useEffect(() => { if (focusRef && focusRef.current) { focusRef.current.focus(); } }, [focusRef.current]); return ( <React.Fragment> <h1 tabIndex="-1" ref={focus}> Focus Here </h1> </React.Fragment> ); };¡Cualquier ayuda es muy apreciada!
Una referencia es una referencia a un objeto con una sola propiedad: current . Establecer la propiedad actual no cambia el objeto ni provoca una nueva representación.
Para eludir eso, puede usar useState para mantener la referencia. Una referencia en reaccionar también puede ser una función. Pase setFocusRef al componente, que lo llamará tan pronto como se represente. Esto configurará focusRef para que apunte al elemento DOM relevante y provocará una nueva representación. El valor modificado de focusRef useEffect y, dado que focusRef no es null ahora, se llamaría a focusRef.focus .
const { useState, useEffect } = React; const Focus = () => { const [focusRef, setFocusRef] = useState(null); useEffect(() => { if(!focusRef) return; focusRef.focus(); }, [focusRef]); return ( <h1 tabIndex="-1" ref={setFocusRef}> Focus Here </h1> ); }; ReactDOM.render( <Focus />, root ) <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>El problema al que se enfrenta es que cambiar una referencia no activa un renderizado. Está utilizando focusRef.current como una dependencia de su gancho useEffect , pero de hecho, cuando el valor actual de focusRef cambia, no necesariamente activa el efecto, simplemente muta solo la referencia. Entonces, necesita algo más para activar la nueva representación y, cuando eso sucede, se detecta un cambio de focusRef.current y el efecto puede volver a ejecutarse. Y si focusRef.current nunca cambia, el efecto solo se activa cuando se monta el componente (es por eso que funciona en la actualización).
Probablemente esté usando la herramienta incorrecta para hacer el trabajo. Pregúntese a qué desea responder como componente. ¿Cambiar de ubicación? Entonces necesita un efecto para ejecutar en función del cambio de ubicación, no una referencia.
const focusRef = useRef() const location = useLocation() useEffect(() => { if (location.pathname === '/my-url') { focusRef.current.focus() } }, [location]) Algo como esto activa el efecto en cada cambio de location , luego, dentro del efecto, puede poner su condición para un nombre de ruta, por ejemplo.