Sergio Xalambrí

Componentes con Hijos Personalizables en React

Para evitar prop drilling y hacer componentes aún más personalizables vamos a ver como usar un prop para cambiar el contenido de un componentes de React.

En el artículo anterior creamos Header e hicimos que renderice Hello internamente. Hoy vamos a hacer que el contenido de Header se pueda personalizar como un prop de forma que podamos decidir si usar Hello o no.

Esto además nos va a evitar el uso de prop drilling, pero ¿Por qué querríamos evitar esto? En nuestro caso no hay ningún problema con usar prop drilling, pero a medida que agregemos más y más componentes que reciban y pasen props a sus hijos esto se puede llegar a volver un problema debido a que:

  • Complicaría refactorizar nuestros datos (props).
  • Terminaríamos pasando más props de los necesarios para evitar problemas de olvidarnos un prop.
  • No pasaríamos props que si son necesarios debido al abuso de defaultProps.
  • Dificultaría seguir el flujo de props en nuestra aplicación si terminamos renombrando props a mitad de camino.

Todo esto se puede evitar haciendo lo que vamos a hacer eso.

function Header(props) {
  return React.createElement(
    "header",
    null,
    React.createElement(Hello, { name: props.name })
  );
}

Header.propTypes = {
  name: PropTypes.string
};

Header.defaultProps = {
  name: "Mundo"
};

Ese es nuestro Header, vamos a hacer que en vez de recibir el prop name reciba un prop que vamos a llamar children y vamos a hacerlo obligatorio.

function Header(props) {
  return React.createElement("header", null, props.children);
}

Header.propTypes = {
  children: PropTypes.node.isRequired
};

Como vemos pasamos props.children como tercer elemento de React.createElement, esto es porque el contenido, como lo definimos en nuestros propTypes, es un nodo de React por lo que es cualquier cosa que sirva como hijo de un elemento.

Si actualizamos el ejemplo usando nuestro nuevo Header quedaría así:

function Hello(props) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Hello.propTypes = {
  name: PropTypes.string
};

Hello.defaultProps = {
  name: "Mundo"
};

function Header(props) {
  return React.createElement("header", null, props.children);
}

Header.propTypes = {
  children: PropTypes.node.isRequired
};

const element = React.createElement(Header, {
  children: React.createElement(Hello, { name: "Sergio" })
});

const node = document.getElementById("app");

ReactDOM.render(element, node);

Como vemos ahora Header no sabe que Hello recibe un prop name, el solo recibe el elemento creado a partir de Hello como su prop children y lo coloca dentro de <header>.

Con esto acabamos de mejorar como nuestro componente se combine de otros componentes lo que permitiría que Header reciba cualquier otro componente o elemento de React y lo envuelva en la etiqueta <header>.

En el siguiente artículo vamos a ver más sobre este prop children

Read next: Uso del prop children en React

El prop children tiene significado especial para React, veremos para que sirve y como usarlo en nuestros propios componentes.