Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (74 sloc) 3.2 KB
title date description lang published tags next
Composición de Componentes en React
2019-02-26 16:27:49 UTC
Una de las mejores cosas de React es poder combinar componentes para crear nuevo componentes más complejos
es
true
Frontend, React, JavaScript, Spanish
title path description
Componentes con Hijos Personalizables en React
/articles/componentes-react-hijos-personalizables
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.

Hasta ahora hemos creado un solo componente, lo más normal al usar React es tener múltiples componentes y combinarlos para formar un componente más complejo. Hoy vamos a ver como hacer esto.

Si recordamos del artículo anterior nuestro componente debe lucir así:

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

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

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

Vamos a crear un componente Header que renderice Hello internamente y agregue una etiqueta <header> alrededor de nuestro <h1>.

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

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

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

Si vemos acabamos de crear nuestro nuevo componente que crea un elemento <header> y dentro de este crea otro elemento usando el componente Hello, a parte de esto hicimos que este nuevo componente reciba el prop name y se lo pase tal cual a Hello.

Nota: Pasar props de un componente padre a un componente hijo se conoce como prop drilling. En futuros artículos veremos algunos problemas de esta técnica y como solucionarlos, pero es importante entender que no es una mala práctica hacerlo.

Esto es llama composición de componente, el nombre viene de Programación Funcional donde existe la técnica Composición de Funciones. La idea es que uses funciones, o en nuestro caso componentes, más pequeños y simples para crear funciones/componentes más complejos.

De esta forma podríamos tener varios componentes que usen internamente Hello para crear diferentes resultados agregando más contenido alrededor de este.

Si ahora actualizamos nuestro código 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,
    React.createElement(Hello, { name: props.name })
  );
}

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

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

const element = React.createElement(Header, { name: "Sergio" });
const node = document.getElementById("app");

ReactDOM.render(element, node);

¡Con esto acabas de crear tu segundo componente! En otro artíuclo veremos como mejorar Header para personalizar el contenido dentro de <header>.

You can’t perform that action at this time.