Slot Pattern

Définition

Pattern qui permet au parent de passer du contenu JSX dans des emplacements nommes du composant enfant, via des props ou children spécifiques.

Analogie

Comme un formulaire administratif avec des cases a remplir : chaque case (slot) attend un contenu spécifique.

Exemple de code

function Layout({ header, sidebar, children }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}
<Layout header={<Nav />} sidebar={<Menu />}>Contenu</Layout>

Cas d'usage

Composants de layout configurables avec plusieurs zones de contenu (header, footer, sidebar).

Termes liés