Composition : children et découpage en composants

Construisez des composants conteneurs réutilisables avec la prop children et découpez vos écrans en responsabilités claires.

6 min · 3 questions

Certains composants ne connaissent pas leur contenu à l'avance : une carte, une fenêtre modale, une mise en page. React résout cela avec la prop spéciale children : tout ce que vous placez entre la balise ouvrante et la balise fermante d'un composant lui est transmis, prêt à être inséré où il le souhaite. Le conteneur gère le cadre, l'appelant fournit le contenu.

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function App() {
  return (
    <Card>
      <h2>Facture #1024</h2>
      <p>Montant : 49,90 €</p>
    </Card>
  );
}

Quand un seul emplacement ne suffit pas, passez du JSX dans des props nommées : un titre, un pied de page, une barre d'actions. Une prop peut recevoir un élément React comme n'importe quelle autre valeur. Vous obtenez plusieurs « emplacements », chacun clairement nommé.

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

La composition guide aussi le découpage. Un composant doit avoir une responsabilité identifiable : afficher une ligne d'utilisateur, mettre en page une liste. Dès qu'un composant accumule plusieurs rôles, extrayez des sous-composants : chacun devient plus court, plus facile à tester et réutilisable ailleurs.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que reçoit la prop children d'un composant ?
   • La liste de ses composants enfants déclarés dans le même fichier
   • Tout ce qui est placé entre sa balise ouvrante et sa balise fermante
   • Les props transmises par le composant parent
2. Peut-on passer du JSX dans une prop autre que children ?
   • Oui, un élément React est une valeur comme une autre
   • Non, seule la prop children accepte du JSX
   • Oui, mais uniquement sous forme de chaîne contenant du HTML
3. Quel signal indique le plus sûrement qu'un composant doit être découpé ?
   • Il dépasse vingt lignes de code
   • Il utilise plus d'un useState
   • Il cumule plusieurs responsabilités distinctes dans son rendu