React es una librería de JavaScript que ha creado su propia sintaxis para simplificar el proceso de crear interfaces de usuario. Uno de los elementos más importantes para esta librería es el componente, que puede ser de clase o de función, según con qué esté declarado. En este post, te enseñaremos cómo pasar una ref a un componente función en React, algo que normalmente solo podemos hacer con un componente de clase.
Un poco de contexto
En nuestros posts sobre refs y el DOM en React y pasar una ref en React, te hemos mencionado que las refs son un mecanismo que podemos pasar como valor de la propiedad ref. Sin embargo, solo lo podemos hacer para elementos HTML, como textarea, y componentes de tipo clase. Cuando intentemos pasar una ref a un componente función en React, veremos en nuestro inspector un warning que lee lo siguiente.
Warning: Function componentes cannot be given refs. Attempts to access this ref will fail.
Esta advertencia nos quiere decir que una ref en un componente función no nos va a cargar nada. Sin embargo, React sabe que su lógica puede ser muy restrictiva. Por este motivo, existen aún un par de escapes para pasar una ref a un componente función en React. A continuación, te lo enseñamos.
¿Por qué pasar una ref a un componente función en React?
Pasar una ref a un componente función en React puede ser muy útil cuando estamos creando librerías de componentes personalizadas. En estos casos, es muy usual querer reemplazar los elementos HTML por componentes propios que podamos usar a lo largo de todos nuestros proyectos. Esto nos permite darle propiedades y estilos personalizados. Puedes encontrar ejemplos de esto en nuestros posts sobre crear un sustituto de input en React y crear un componente photo en React.
Entonces, supongamos que tenemos el siguiente componente de tipo función TextArea:
const TextArea = ({ className, …props}) => {
return (
<div className={classNames(‘textarea’, className)}>
<input type=»text»/>
<textarea ref={textAreaRef} {…props} className=»textarea-input»/>
</div>
);
};
export default TextArea;
Entonces, en nuestra librería usaremos directamente el componente TextArea, no el elemento HTML que tiene dentro. Por ello, queremos usarlo exactamente igual que si fuera un elemento HTML y, para esto, debemos poder pasarle una ref. Sin embargo, es un componente de tipo función, no es un componente de tipo clase ni un elemento puro de HTML.
¿Cómo pasar una ref a un componente función en React?
Existen dos maneras para pasar una ref a un componente función en React:
innerRef
La primera manera de ejecutar esta acción es crear una propiedad nueva que no se llame ref, pero que tenga como valor a nuestro ref. Entonces, supongamos que tenemos el siguiente ref:
const textAreaRef = useRef (null);
Luego, podemos pasar esta ref como valor de una propiedad innerRef de nuestro textarea. Esto se puede hacer por fuera del componente directamente en su componente padre.
<Textarea
innerRef = {ref}
/>
Ahora, nadie nos puede decir que no podemos pasar un innerRef, pues lo que no podemos hacer es pasar un atributo ref a un componente de tipo función. Después, este componente Textarea puede recoger la propiedad innerRef, así como recoge className y props.
Exponiendo refs en React
La segunda manera de pasar una ref a un componente función en React no involucra un workaround como el anterior, sino que es una técnica conocida como exponiendo refs en React. Esta es una técnica en la que se expone la ref de un elemento al exterior de un componente.
Exponer refs en React es igual de útil cuando estamos creando una librería de componentes que se comportan como elementos nativos de HTML. Para conocer más sobre esta técnica, te invitamos a leer nuestro post acerca de exponer refs en React.
¿Cuál es el siguiente paso?
Al leer este post, no solo has aprendido cómo pasar una ref a un componente función en React, sino que también has dado un paso hacia convertirte en un experto del desarrollo web. Ahora, el siguiente movimiento es aprender sobre otras herramientas y lenguajes. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas y lenguajes de programación para la web, como pueden ser JavaScript, HTML, CSS, JSX y webPack. ¿A qué esperas para dar el siguiente paso? ¡Inscríbete ya y triunfa!
