Slot Pattern

React 🟡 Mid

Definition

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

Analogie

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

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 lies

#patterns#composition