Render props para reutilizar codigo

October 29, 2019

...

Hoy vamos a ver las render props de react, que es y como nos puede ayudar a hacer nuestro código más reutilizable.

Las render props son una técnica utilizada en react para poder incentivar la composición de componentes. Y se ve más o menos así:

const Header = () => {
 return (
	 <Navbar left={() =>
		 <div>Hola Chanchito Feliz!</div>
	 } />
 )
}

La intención que muestra arriba es la siguiente:

  • Creamos un componente llamado Header
  • Este retorna otro componente llamado Navbar
  • Este componente de Navbar recibe una props que debe ser otro componente.
  • Este componente es renderizado dentro de Navbar junto a lo que ya contiene Navbar.

Porque esto es útil?

Porque podemos tener un componente que sabemos exactamente como debería verse, pero su contenido puede ser otro componente que no tenemos muy claro cuál podría ser. Además podemos desacoplar nuestro código creando generalizaciones!, eso hace que nuestra interfaz de usuario se empiece a ver y a comportar de manera consistente, qué mejor?

La implementación de nuestra Navbar se vería así:

const Header = ({ left }) => {
  return (
	  <div>
		  <div>{left}</div>
  		  <div>Acá más texto genérico de nuestro Header!</div>
	  </div>
  )
}

Vamos a ver ahora un ejemplo incluso más sencillo, vamos a crear un botón genérico para nuestra aplicación:

const style = {
  boton: {
    backgroundColor: '#ff0000',
    color: '#ffffff',
  }
}
export default ({ children, ...rest }) => (
  <button style={style.boton} {...rest}>{children}</button>
)

Ahora, quédate conmigo... si bien este botón es horrible, lo que queremos mostrar acá es como con un par de lineas de código podemos tener un componente re-utilizable que fue muy sencillo de construir. Este botón tomará todas las propiedades que reciba y se las entregará a button, además define un estilo base que puede ser reemplazado y también recibe la propiedad de children y esta se renderizará dentro de las etiquetas de button.

La forma de utilizar este componente es de la siguiente manera:

import Button from './button'
const MiContenedor = () => (
  <div>
    <Button onClick={(e) => {}}>Mi boton</Button>
  </div>
)

Este después podremos utilizarlo como cualquier componente. Es importante mencionar de que la propiedad que utilicemos para renderizar el contenido no es necesario que se llame render, puede tener el nombre que deseen definir ustedes o también puede ser pasado como ven en el ejemplo anterior del botón, como un hijo de este.


Suscríbete

Suscríbete a la lista para más cursos, posts y videos tutoriales. Prometo no enviarte más de un correo semanal 🙏

Creado por Nicolás Schürmann ingeniero e instructor de software. Cuando no está programando, esta frente a una cámara dictando cursos, creyéndose youtuber o apoyando a sus alumnos. Puedes seguirlo en twitter o también suscribirte a su canal de youtube. Considera comprar sus cursos por este medio y así apoyas al instructor.