Hasta ahora, hemos pasado datos como atributos: <Card nombre="Ana" />. Pero hay situaciones donde quieres que un componente envuelva contenido, igual que un <div> envuelve otros elementos.
¿Ves? El contenido va entre las etiquetas de apertura y cierre. En React, ese contenido se recibe como una prop especial llamada children.
children es una prop que React pasa automáticamente con todo lo que pongas entre las etiquetas del componente:
Ahora Card es un componente contenedor — aplica estilos y estructura sin saber qué hay dentro. Puedes meter lo que quieras:
Tres usos del mismo componente con contenido completamente diferente.
Este patrón se llama composición y es uno de los más poderosos de React. En vez de crear componentes cada vez más complejos con docenas de props, creas componentes simples que se combinan:
Cada componente tiene una responsabilidad clara: Layout controla la disposición, Card aplica estilos de tarjeta, Header organiza la cabecera. Ninguno necesita saber qué hay dentro.
children no se limita a JSX. Puede ser:
Un componente puede recibir children junto con otras props normales:
Card.js, modifica el componente para que reciba children y lo renderice dentro de un div con estilos de tarjeta (backgroundColor, padding, borderRadius...)App.js, usa <Card> con contenido diferente entre sus etiquetasLa composición con children es el alma de React. Componentes pequeños que se combinan en interfaces complejas. Simple pero extraordinariamente poderoso.