Slots: pasar elementos por props — Composición: children y slots

Más de un hueco

children es estupendo cuando hay un sitio donde colocar contenido. Pero a veces un componente tiene varias zonas que quieres rellenar: una cabecera, un cuerpo, una barra de acciones... A esas zonas las llamamos slots (huecos).

La solución: como en JSX un elemento es un valor más, puedes pasar JSX a través de props normales, no solo por children.

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

Cada prop es un hueco que el llamador rellena con el marcado que quiera:

<Panel
  titulo={<h2>Configuración</h2>}
  acciones={<button>Guardar</button>}
>
  <p>Contenido principal del panel.</p>
</Panel>

children vs slots por props

Usa children para el contenido principal y único.
Usa slots por props cuando hay varias zonas bien diferenciadas (titulo, acciones, icono, pie...).

<DialogoConfirmar
  titulo="¿Eliminar archivo?"
  cancelar={<button>No</button>}
  confirmar={<button>Sí, borrar</button>}
/>

Un slot puede ser cualquier nodo de React: un string, un número, un elemento JSX o incluso otro componente ya construido. Tú decides en qué <header>, <aside> o <footer> lo colocas.