Hay un componente funcional implementado con getElementById y debe actualizarse para usar useRef hook.
Codigo original:
import React, { useState, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myDefaultElement = 'default-element', }) => { const [elementOutlet, setElementOutlet] = useState<HTMLOListElement>(); useEffect(() => { const refElement = document.getElementById(myDefaultElement) as HTMLOListElement; if (refElement) { setElementOutlet(refElement); } }, [myDefaultElement]); return createPortal( <li> // something </li>, elementOutlet ); };el código anterior funciona bien, el único cambio que hice fue la primera línea dentro de useEffect.
De:
const refElement = document.getElementById(myDefaultElement) as HTMLOListElement;A:
const refElement = useRef(myDefaultElement) as HTMLOListElement;Al pasar el cursor sobre la nueva línea, dice:
React Hook "useRef" no se puede llamar dentro de una devolución de llamada. Los React Hooks deben llamarse en un componente de función React o en una función React Hook personalizada
¿Hay alguna manera de hacer que ref funcione bien dentro de useEffect?
No puede llamar a useRef dentro de un efecto, verifique la regla de los ganchos . Prueba algo como esto
const Component = () =>{ const node = useRef(null) useEffect(() =>{ // current will never be null here, since this effect will // only run after the first mount and therefore after refs // appending setElementOutlet(node.current) },[]) return <div ref={node} /> }Las referencias ya tienen una firma estable garantizada por el ciclo de vida de react, por lo que no tiene que declararla como una dependencia dentro de su efecto.
A juzgar por su ejemplo, solo está recibiendo una id como accesorios, no el nodo en sí. Tienes dos opciones:
getElementById (no hay nada de malo en eso) y luego agregue el nodo montado dentro de una referencia const Component = ({ id }) =>{ const node = useRef(document.getElementById(id)) useEffect(() =>{ const el = document.getElementById(id) if(el) node.current = el },[id]) } const ParentComponent = () =>{ const node = useRef(null) return( <> <Component childRef={node} /> <div ref={node} /> </> ) } const Component = ({ childRef }) =>{ ... }Saludos compañero olister.