Necesito acceder a la referencia a un área de texto dentro de un componente. Dentro del componente, es bastante fácil:
const MyComponent = () => { const inputRef = useRef(); return <textarea ref={inputRef} /> }Ahora la referencia está disponible en MyComponent y puedo usarla para cierta lógica interna.
Hay casos en los que también necesito acceder a la referencia desde el componente principal. En ese caso, puedo usar forwardRef:
const MyComponent = React.forwardRef((props, ref) => { return <textarea ref={ref} /> }) // In some parent const MyParent = () => { const inputRefFromParent = useRef(); return <MyComponent ref={inputRefFromParent} /> } Ahora puedo acceder a la referencia del área de textarea desde el componente principal y usarlo para la lógica dentro del componente principal.
Me encuentro en una situación en la que necesito hacer algo de lógica interna con la referencia dentro de MyComponent , pero es posible que también necesite obtener esa referencia de MyParent . ¿Cómo puedo hacer esto?
Puede mantener una ref en MyComponent y exponer lo que necesitaría en el componente principal usando el gancho useImperativeHandle usando la ref pasada desde MyParent .
Prueba como a continuación. Expone el método de enfoque en el área de texto al padre. Y puede hacer otras cosas internas con el acceso a textAreaRef .
import { useRef, forwardRef, useImperativeHandle } from "react"; const MyComponent = forwardRef((props, ref) => { const textAreaRef = useRef(); // all the functions or values you can expose here useImperativeHandle(ref, () => ({ focus: () => { textAreaRef.current.focus(); } })); const internalFunction = () => { // access textAreaRef }; return <textarea ref={textAreaRef} />; }); // In some parent const MyParent = () => { const inputRefFromParent = useRef(); // you can call inputRefFromParent.current.focus(); in this compoenent return <MyComponent ref={inputRefFromParent} />; };Además de la respuesta de Amila, encontré otra forma de hacerlo, usando una devolución de llamada ref :
const MyComponent = React.forwardRef((props, parentRef) => { const localRef = useRef(); return <textarea ref={ref => { parentRef.current = ref; localRef.current = ref; }} /> }) Por lo tanto, la referencia de devolución de llamada mantiene un control de grano más fino de la referencia al área de textarea , y simplemente asigna su valor tanto a la referencia local como a la referencia principal.