props.children y componentes contenedor

Componer en lugar de configurar

Hasta ahora pasabas datos a un componente con props normales (titulo, nombre...). Pero muchas veces lo que quieres pasar no es un dato, sino otra porción de interfaz: lo que escribes entre las etiquetas de apertura y cierre del componente.

React entrega ese contenido a través de una prop especial: children.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

Y se usa envolviendo cualquier marcado:

<Card>
  <h2>Hola</h2>
  <p>Soy el contenido de la tarjeta.</p>
</Card>

Aquí Card no sabe ni le importa qué hay dentro: solo lo envuelve con un borde, un padding o una sombra. Esto la hace un componente contenedor reutilizable: la misma Card sirve para un texto, un formulario o una imagen.

Por qué es tan útil

• Reutilización real: el "marco" (estilo, layout) vive en un sitio; el contenido lo decide quien usa el componente.
• Menos props: en vez de inventar textoTitulo, textoCuerpo, urlImagen... dejas que el llamador componga el interior libremente.

function Layout({ children }) {
  return (
    <main className="layout">
      <header>Mi App</header>
      <section>{children}</section>
    </main>
  );
}

function App() {
  return (
    <Layout>
      <h1>Página de inicio</h1>
    </Layout>
  );
}

children puede ser un solo elemento, varios, texto, o incluso null. React lo trata como cualquier otra prop: lo pintas con {children} donde quieras.