coopernet Réussir son site web et ses applications de la conception à la réalisation

Délégation de contenu

Certains composants ne connaissent pas leurs enfants à l’avance. C’est particulièrement courant pour des composants comme Sidebar ou Dialog, qui représentent des blocs génériques.

Pour de tels composants, nous vous conseillons d’utiliser la prop spéciale children, pour passer directement les éléments enfants dans votre sortie :

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

Cela permet aux autres composants de leur passer des enfants quelconques en imbriquant le JSX :

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Bienvenue
      </h1>
      <p className="Dialog-message">
        Merci de visiter notre vaisseau spatial !
      </p>
    </FancyBorder>
  );
}

Spécialisation

Parfois, nous voyons nos composants comme des « cas particuliers » d’autres composants. Par exemple, nous pourrions dire que WelcomeDialog est un cas particulier de Dialog.

Avec React, on réalise aussi ça avec la composition ; un composant plus « spécialisé » utilise un composant plus « générique » et le configure grâce aux props :

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Bienvenue"
      message="Merci de visiter notre vaisseau spatial !" />
  );
}