Actualmente estoy experimentando con React, y ahora me encontré con un problema que parece que no puedo resolver.

En mi aplicación, uso una biblioteca React para manejar las teclas de acceso rápido, estas teclas de acceso rápido tienen un alcance, por lo que cuando quiero que un determinado conjunto de teclas de acceso rápido esté activo en un div, tengo que envolver ese div con una etiqueta <HotKeys> .

Tengo que alternar algunos de estos divs, así que tendré algo similar a

 isActive ? <HotKeys ...> <div ...>...</div> </HotKeys> : <div ...>...</div>

Ahora necesito encontrar una manera de enfocar el div cuando se crea. Casi todos los artículos en la web sugieren algo como esto:

 const focusRef = useRef(null); useEffect(() => { focusRef.current.focus() }) return ( isActive ? <HotKeys ...> <div ref={focusRef} tabIndex={-1} ...>...</div> </HotKeys> : <div ...>...</div> )

Probé algunas variaciones, incluido tener el nivel superior de div (sin las <HotKeys> envolviéndolas), todo fue en vano.

Cuando imprimo el objeto focusRef en el método useEffect, obtengo el resultado esperado, focusRef está correctamente configurado y actual, pero llamar al método de enfoque no funciona. En un momento intenté llamar al método de enfoque desde un botón y activarlo manualmente después de que el componente se había cargado por completo, parecía funcionar (se estaba cambiando document.activeElement ), luego, por alguna razón, dejó de funcionar nuevamente. Todo esto me lleva a creer que de alguna manera el componente no se ha cargado por completo, a pesar de llamar al gancho useEffect, que, si entiendo correctamente, se activa cuando el elemento se ha renderizado por primera vez/después de cada cambio de estado.

Realmente agradecería algo de ayuda con esto, ya que básicamente comencé a aprender React ayer.