La técnica exponiendo refs en React es una estrategia que nos permite pasar una ref a un componente función en esta librería de JavaScript, muy útil cuando estamos creando librerías de componentes. En este post, te enseñaremos cómo pasar referencias en funciones exponiendo refs en React.
Exponiendo refs en React
En nuestro post sobre pasar una ref a un componente función en React te hemos contado que, cuando intentamos pasar una ref por un componente de función, nos aparecerá la siguiente advertencia en nuestro inspector:
Warning: Function components cannot be given refs. Attemps to access this ref will fail.
Esta advertencia tiene una segunda parte:
Did you mean to use React.forwardRef?
Aquí, React nos está sugiriendo usar una función propia con la que podemos escapar la regla del componente exponiendo refs en React.
¿Cómo se utiliza React.forwardRef exponiendo refs en React?
La función React.forwardRed se utiliza envolviendo el componente. Es decir, vamos a envolver la función del componente con este método. Lo que hará este comando es recoger la ref que viene desde fuera del componente y nos la entregará como segundo parámetro. Esto nos permitirá entregarla donde queramos:
Entonces, en lugar de definir el componente de la siguiente manera:
const MyButton = props => (
<button className ? “my-button”>
{props.children}
</button>
);
Lo definiremos usando el método React.forwardRef, exponiendo refs en React:
const MyButton = React.forwardRed ((props, ref) => (
<button ref={ref} className=”my-button”>
{props.children}
</button>
));
De esta manera, podemos crear una ref desde fuera de nuestro componente y pasársela de la siguiente manera:
const ref = React.create.Red ( );
<MyButton ref={ref}> Click me! </MyButton>
Veamos un ejemplo
Imagina que tenemos el siguiente componente de tipo función, que hemos creado para sustituir uno de nuestros elementos HTML en nuestro post sobre crear un sustituto de input en React.
const FormField ({ className, label, …props }) => {
return (
<div className= {classNames (‘formField’, className)}>
<lavel className= “formField-label”>
<span>{label}</span>
<input className= “formField-input” autoComplete = “off” {…props} />
</label>
</div>
);
}
export default FormField
Entonces, lo primero que haremos será envolver la función con React.forwardRef, exponiendo refs en React. Para ello, declaramos el componente como resultado de React.forwardRef.
const FormField = forwardRef ({ className, label, …props }) => {
return (
<div className= {classNames (‘formField’, className)}>
<lavel className= “formField-label”>
<span>{label}</span>
<input className= “formField-input” autoComplete = “off” {…props} />
</label>
</div>
);
}
Lo que hará esto será capturar cualquier ref que pase desde fuera al componente FormField y lo pasará como segundo parámetro.
const FormField = forwardRef ({ className, label, …props }, ref) => {
Ten presente que ref no es una prop como tal. Por ello, no puede pasarse dentro de las props. Sin embargo, el comando nos pasa este mecanismo como parámetro extra del componente función.
Una vez tenemos la ref como parámetro, podemos decidir pasarla en cualquier parte del componente. Entonces, nosotros hemos decidido pasarla al input. Sin embargo, lo podrías hacer a cualquier elemento.
const FormField = forwardRef ({ className, label, …props }, ref) => {
return (
<div className= {classNames (‘formField’, className)}>
<lavel className= “formField-label”>
<span>{label}</span>
<input ref= {ref} className= “formField-input” autoComplete = “off” {…props} />
</label>
</div>
);
}
¿Qué logra este procedimiento? El componente FormField, el elemento input de HTML que tenemos bajo el input, será cargado dentro de la ref extera. De este modo, hemos sacado el elemento, exponiendo refs en React.
Si quisieras ver lo que pinta tu ref, podrías pasar un efecto y pintar su contenido en pantalla. Esto te permitirá ver en tu inspector exactamente lo que nos devuelve esta referencia.
useEffect (( ) => {
console.log (ref.current);
}, [ ]);
En nuestro caso, estamos viendo el elemento HTML de input, donde hemos pasado la ref. Lo que todo esto nos permite es acceder a la API del elemento HTML con la ref. Entonces, podemos usar los métodos que están dentro de esta API. Por ejemplo, un foco:
useEffect (( ) => {
console.log (ref.current);
ref.current.focus ( );
}, [ ]);
En este sentido, le estaremos dando el foco al elemento en donde hemos pasado y expuesto la ref.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué hacemos cuando estamos exponiendo refs en React, seguro que quieres seguir aprendiendo sobre las posibilidades que el mundo del desarrollo web tiene para ti. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar lenguajes y herramientas de programación para la web, como son JavaScript, HTML, CSS, webPack y Babel. ¿Te animas a seguir aprendiendo con nosotros para convertirte en un profesional? ¡Solicita ahora más información!
