Slots: passar elementos via props — Composição: children e slots

Mais de um buraco

children é ótimo quando há um lugar para colocar conteúdo. Mas às vezes um componente tem várias áreas que você quer preencher: um cabeçalho, um corpo, uma barra de ações... Essas áreas chamamos de slots (buracos).

A solução: como em JSX um elemento é mais um valor, você pode passar JSX por meio de props normais, não só via children.

function Panel({ titulo, acoes, children }) {
  return (
    <section className="panel">
      <header>{titulo}</header>
      <main>{children}</main>
      <footer>{acoes}</footer>
    </section>
  );
}

Cada prop é um buraco que quem chama preenche com a marcação que quiser:

<Panel
  titulo={<h2>Configurações</h2>}
  acoes={<button>Salvar</button>}
>
  <p>Conteúdo principal do painel.</p>
</Panel>

children vs slots via props

Use children para o conteúdo principal e único.
Use slots via props quando houver várias áreas bem diferenciadas (titulo, acoes, icone, rodape...).

<DialogoConfirmar
  titulo="Excluir arquivo?"
  cancelar={<button>Não</button>}
  confirmar={<button>Sim, excluir</button>}
/>

Um slot pode ser qualquer nó do React: uma string, um número, um elemento JSX ou até outro componente já construído. Você decide em qual <header>, <aside> ou <footer> colocá-lo.