`props.children` : Passer des éléments enfants

Une prop spéciale pour la composition

Parmi toutes les props qu'un composant peut recevoir, il en existe une particulièrement spéciale et puissante : `props.children`. Cette prop n'est pas passée explicitement comme un attribut (comme `nom={...}` ou `age={...}`). Au lieu de cela, sa valeur est déterminée par le contenu qui est placé entre les balises ouvrante et fermante du composant lorsqu'il est utilisé par son parent.

Cette prop est la clé pour implémenter le pattern de composition générique que nous avons brièvement mentionné dans la section sur la composition. Elle permet à un composant "wrapper" ou "conteneur" de rendre n'importe quel contenu arbitraire (texte, éléments HTML, autres composants React) qui lui est passé par son parent, sans avoir besoin de savoir à l'avance ce que ce contenu sera.

Comment ça marche : L'exemple du composant `Card`

Reprenons l'exemple d'un composant `Card` qui sert de cadre visuel. Lorsque nous utilisons ce composant comme ceci :

  
Titre de la Carte
  
Contenu de la carte.
  

Le composant `Card` recevra une prop nommée `children`. La valeur de `props.children` sera tout ce qui se trouve entre `` et ``, c'est-à-dire dans ce cas, l'élément `

`, l'élément `

`, et le composant ``. React les regroupera (probablement dans un tableau s'il y a plusieurs éléments).

A l'intérieur de la définition du composant `Card`, nous pouvons alors simplement afficher `props.children` à l'endroit où nous voulons que ce contenu imbriqué apparaisse :

// Définition du composant Card
function Card(props) {
  // Style simple pour l'exemple
  const cardStyle = {
    border: '1px solid lightgray',
    padding: '1rem',
    margin: '1rem',
    borderRadius: '4px'
  };

  return (
    

      {/* On affiche ici tout ce qui a été passé entre les balises Card */}
      {props.children}
    
  );
}

// Utilisation (comme dans l'exemple ci-dessus)
function App() {
  return (
    
      
Titre de la Carte
      
Contenu de la carte.
      

{ /* Supposons que Button est défini ailleurs */} ); }

Le composant `Card` agit comme un cadre, et `props.children` est l'espace réservé où le contenu spécifique fourni par `App` sera inséré.

Le type de `props.children`

La valeur de `props.children` peut varier en fonction de ce qui est passé entre les balises :

• Si rien n'est passé : `props.children` sera `undefined`.
• Si un seul élément est passé (texte, nombre, élément JSX) : `props.children` sera cet élément unique.
• Si plusieurs éléments sont passés : `props.children` sera un tableau contenant ces éléments.

React est suffisamment intelligent pour gérer le rendu de ces différents types directement lorsque vous faites `{props.children}`. Cependant, si vous avez besoin de manipuler les enfants (par exemple, pour les cloner, les compter, ou les filtrer), React fournit des utilitaires via `React.Children` (`React.Children.map`, `React.Children.forEach`, `React.Children.count`, etc.) pour travailler avec la structure opaque de `props.children` de manière fiable, surtout lorsqu'il s'agit d'un mélange d'éléments et de texte.

Cas d'utilisation courants

`props.children` est utilisé dans de nombreux scénarios pour créer des composants génériques et réutilisables :

• Composants de mise en page : `Sidebar`, `MainLayout`, `Modal`, `Dialog`, `Card`, `Panel`, `AccordionItem`.
• Composants wrappers : Composants qui ajoutent un contexte, un style, ou un comportement autour d'un contenu arbitraire (par exemple, un `AuthProvider` qui rend ses enfants uniquement si l'utilisateur est connecté).
• Composants utilitaires : Par exemple, un composant `ErrorBoundary` (composant classe) qui affiche une UI de secours si l'un de ses enfants (`props.children`) génère une erreur.
• Bibliothèques d'UI : La plupart des bibliothèques de composants (comme Material UI, Ant Design) utilisent abondamment `props.children` pour leurs composants conteneurs.

Conclusion : La clé de la composition générique

La prop spéciale `props.children` est un mécanisme fondamental et élégant en React pour réaliser la composition de composants de manière générique. Elle permet de créer des composants conteneurs ou wrappers qui peuvent encapsuler et rendre n'importe quel contenu passé entre leurs balises ouvrante et fermante.

Maîtriser `props.children` ouvre la porte à la création de composants hautement réutilisables et flexibles, favorisant une architecture propre et découplée dans vos applications React. C'est un pattern que vous utiliserez et rencontrerez constamment.