React es una librería JavaScript que ha creado sus propios métodos y lógica para facilitar el desarrollo de interfaces de usuario. Sin embargo, su lógica puede llegar a ser restrictiva. En este post, te enseñaremos cómo pasar una ref en React, un mecanismo que nos permite acceder a los métodos del DOM cuando lo necesitemos.
¿Qué es pasar una ref en React?
En nuestro post sobre refs y el DOM en React, te decimos que no podemos pasar refs a componentes de tipo función, pero sí lo podemos hacer a otros elementos.
Ten en cuenta que pasar una ref es diferente a declarar una ref. Es decir, podemos crear una ref en cualquier sección de código que queramos. Sin embargo, solo podemos pasarlas a elementos HTML como textarea o a componentes de tipo clase.
Entonces, pasar una ref es pasar la variable en la que se encapsula una ref como valor de la propiedad ref de un elemento. Puedes ver un ejemplo de pasar una ref a un elemento HTML en nuestro post sobre para qué sirven las refs en React. A continuación, te enseñaremos cómo pasar una ref en React a un componente de tipo clase.
¿Cómo pasar una ref en React?
Supongamos que tenemos un componente de tipo clase llamado TweetsPage. Este componente lo hemos creado en nuestro post sobre componente de clase en React. Ahora que tenemos este componente, podemos crear nuestra ref en cualquier parte del archivo del componente.
Nosotros insertaremos la ref en una función que hemos creado para manejar el componente:
const TweetPageFunction = ( ) => {
const ref = useRef (null)
const { tweetId } = useParams ( );
return <TweetPage tweetId= {tweetId} />;
};
Luego, en el return de la función, devolveremos el componente de tipo clase y pasaremos la ref que hemos creado como valor de su propiedad ref:
const TweetPageFunction = ( ) => {
const ref = useRef (null)
const { tweetId } = useParams ( );
return <TweetPage ref= {ref} tweetId= {tweetId} />;
};
La razón por la que solo puedes pasar una ref a componentes de tipo clase o elementos HTML es que, cuando ejecutamos esta acción, estaremos guardando la instancia del objeto clase creado en el componente. Esto nos permite acceder a los detalles del componente usando el comando ref.current.detalle.
Entonces, aunque suene un poco extraño, podríamos acceder a la modificación de estado a partir de ref.current.setState ( ). De este modo, podríamos hacer que un componente padre, como lo sería TweetPageFunction, tenga acceso a la instancia completa de un componente hijo. A continuación, puedes ver cómo esta función accede al método render del componente clase TweetPage:
const TweetPageFunction = ( ) => {
const ref = useRef (null);
const { tweetId } = useParams ( );
useEffect (( ) => {
console.log (‘ref’, ref.current);
ref.current.render ( )
}, [ ]);
return <TweetPage ref={ref} tweetId = {tweetId} />
};
export default TweetPageFunction
Ahora que hemos aprendido cómo pasar una ref en React, debemos entender qué es lo que sucede: cuando pasamos una ref a un componente de tipo clase, lo que obtenemos de vuelta en ref.current es el this de la clase.
Entonces, la razón por la que no podemos pasar un ref a un componente de tipo función es que una función no tiene this. Por ello, no podemos pasarle una referencia a una función.
Ten presente que esta forma de usar refs es un poco anticuada, pues React se ha alejado de los componentes de tipo clase para acercarse a los hooks de los componentes de tipo función. Sin embargo, puede ser útil al usar librerías de terceros que nos manden componentes de este tipo.
¿Qué sigue?
Ahora que sabes cómo pasar una ref en React, ¡es momento de que utilices este mecanismo en tus propios proyectos! Para seguir aprendiendo a desarrollar todo tipo de proyectos de programación para la web, no solo en React, sino también en herramientas y lenguajes fundamentales como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Con este programa de formación intensiva, te convertirás en un experto del desarrollo web en pocos meses. ¡No te lo pierdas y pide más información!
