Use forwardRef en Reaccionar con TypeScript

1. ¿Qué son las refs en React?
2. ¿Por qué necesitamos forwardRef en React?
3. el forwardRef en React y TypeScript
4. Use forwardRef con TypeScript

En los últimos años, cada vez más desarrolladores han estado usando React y TypeScript juntos. Las descripciones de trabajo pueden confirmar aún más que usar TypeScript con React no es una moda pasajera, sino el presente y el futuro.

Los desarrolladores web prefieren escribir TypeScript para hacer que el código esté más organizado, reducir el espacio para errores y ahorrar tiempo en la depuración.

Este artículo analiza el reenvío de una referencia de un componente secundario al principal.

¿Qué son las refs en React?

Por lo general, la apariencia del elemento DOM React cambia en respuesta a los cambios en los objetos de estado o accesorios. Sin embargo, React aún le permite capturar elementos DOM específicos y modificarlos imperativamente cuando sea necesario.

Refs en React (abreviatura de referencias) permite a los desarrolladores acceder y manipular elementos DOM.

Desde React 16.8, los desarrolladores de React pueden usar el enlace useRef para crear enlaces. Aquí hay un ejemplo.

function App() {
  let inputRef = useRef();
  return (
    <div className>
        <input ref={inputRef} type="text" />
    </div>
  );
}

Aquí, creamos una variable inputRef y la inicializamos como ref.

Luego encontramos el elemento <input> en JSX y establecemos su atributo ref en la variable que creamos anteriormente. Ahora la referencia a este elemento se almacena en la variable.

Las referencias se utilizan a menudo para animar directamente elementos DOM. Por lo general, resaltan los bordes cuando el elemento está enfocado o seleccionado o activan animaciones imperativamente.

¿Por qué necesitamos forwardRef en React?

Normalmente, accedemos a las referencias en el mismo componente donde las creamos.

Sin embargo, a veces es necesario definir una ref para uno de los elementos DOM en el componente principal pero pasarlo al componente secundario. Es por eso que necesita la función forwardRef.

el forwardRef en React y TypeScript

A veces necesitamos acceder a un elemento desde un componente secundario en el componente principal. Por ejemplo, supongamos que tenemos un componente <Message> que contiene un elemento <div> y queremos acceder a él desde el componente principal <Messenger>.

function Message({messageText}) {
    return <div>{messageText}</div>;
}

Tal vez queramos resaltar el cuadro cuando esté enfocado. La única forma de hacerlo es crear una ref en el componente principal; luego, podemos verificar si el elemento está enfocado y resaltarlo condicionalmente.

function App() {
  const input = React.useRef<HTMLElement>(null);

  React.useEffect(() => {
    if (input.current) {
      input.current.focus();
    }
  }, []);

  return <Message messageText="hello world" ref={input} />;
}

Sin embargo, esto generará un error porque un componente principal no puede acceder directamente a un elemento HTML contenido en el componente secundario. En su lugar, usamos forwardRef.

Al definir el componente secundario, debemos realizar los siguientes cambios.

const Message = React.forwardRef((props, ref) => {
    return <div ref={ref}>{props.messageText}</div>;
});

La función forwardRef de React hará que nuestro elemento <div> esté disponible para el padre. Envolvemos todo nuestro componente en la función forwardRef.

Devuelve un componente, que podemos almacenar en la variable Mensaje.

Esta vez, el componente principal accederá a los elementos secundarios.

Use forwardRef con TypeScript

En el ejemplo anterior, cuando creamos una instancia ref y la almacenamos en la variable input, especificamos su tipo: <HTMLElement>.

function App() {
  const input = React.useRef<HTMLElement>(null);
	...
  return <Message messageText="hello world" ref={input} />;
}

El <HTMLElement> es el tipo más genérico para elementos DOM en React. Si estuviera haciendo referencia a un elemento <div>, podría usar un tipo más específico como <HTMLDivElement>.