props.children e componentes contêiner

Compor em vez de configurar

Até agora você passava dados a um componente com props normais (titulo, nome...). Mas muitas vezes o que você quer passar não é um dado, e sim outra porção de interface: o que você escreve entre as tags de abertura e fechamento do componente.

O React entrega esse conteúdo por meio de uma prop especial: children.

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

E ela é usada envolvendo qualquer marcação:

<Card>
  <h2>Olá</h2>
  <p>Sou o conteúdo do cartão.</p>
</Card>

Aqui Card não sabe nem se importa com o que há dentro: apenas o envolve com uma borda, um padding ou uma sombra. Isso o torna um componente contêiner reutilizável: o mesmo Card serve para um texto, um formulário ou uma imagem.

Por que isso é tão útil

• Reutilização de verdade: a "moldura" (estilo, layout) vive em um único lugar; o conteúdo é decidido por quem usa o componente.
• Menos props: em vez de inventar textoTitulo, textoCorpo, urlImagem... você deixa quem chama compor o interior livremente.

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

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

children pode ser um único elemento, vários, texto ou até null. O React o trata como qualquer outra prop: você o renderiza com {children} onde quiser.