Le mécanisme : Les attributs JSX

Maintenant que nous comprenons le concept des props comme moyen de communication de parent à enfant, voyons comment concrètement un composant parent transmet ces informations. Le mécanisme est très intuitif et s'appuie sur la syntaxe que nous avons déjà vue pour les attributs des éléments DOM en JSX.

Lorsque vous utilisez un composant personnalisé dans le JSX d'un composant parent, vous pouvez lui ajouter des attributs, exactement comme vous le feriez pour une balise HTML native (``). Ces attributs que vous définissez sur le composant enfant deviennent les clés de l'objet `props` que recevra ce composant enfant.

Syntaxe de passage des props

La syntaxe suit les mêmes règles que pour les attributs JSX classiques :

• Pour les valeurs de type chaîne de caractères littérales : Utilisez des guillemets doubles `""` (ou simples `''`).
• Pour toutes les autres valeurs (nombres, booléens, variables, fonctions, objets, tableaux, etc.) : Utilisez les accolades `{}` pour insérer une expression JavaScript.

Prenons un exemple avec un composant parent `App` qui utilise un composant enfant `CarteUtilisateur` :

// Composant enfant : CarteUtilisateur.js (on verra comment il lit les props après)
function CarteUtilisateur(props) {
  // ... utilisera props.nom, props.age, props.estActif, props.avatarUrl, props.onClickProfil
  return (
    

      {/* ... affichage basé sur les props ... */}
      Contenu de la carte pour {props.nom}
    
  );
}
export default CarteUtilisateur;

// Composant parent : App.js
import React from 'react';
import CarteUtilisateur from './CarteUtilisateur';

function App() {
  const utilisateur = {
    id: 1,
    nom: "Alice",
    age: 30,
    ville: "Paris"
  };
  const imageProfil = "/images/alice.jpg";
  const isUserActive = true;

  function afficherProfil() {
    alert(`Affichage du profil de ${utilisateur.nom}`);
  }

  return (
    

      
Mon Application
      
      {/* Passage des props au composant CarteUtilisateur */}
      

      {/* On peut réutiliser le composant avec d'autres props */}
       alert('Profil de Bob')} 
        details={{ pays: 'UK' }}
        tags={['Node.js']}
      />
    
  );
}

export default App;

Dans cet exemple, le composant `App` passe huit props différentes (`nom`, `age`, `estActif`, `ville`, `avatarUrl`, `onClickProfil`, `details`, `tags`) au composant `CarteUtilisateur`. Chaque attribut défini sur `` deviendra une propriété de l'objet `props` reçu par `CarteUtilisateur`.

Le Spread Operator (...) pour passer plusieurs props

Si vous avez déjà un objet dont les clés correspondent aux noms des props que vous souhaitez passer, vous pouvez utiliser l'opérateur de décomposition (spread operator) `...` comme raccourci pour passer toutes les paires clé-valeur de cet objet en tant que props individuelles. C'est particulièrement utile lorsque vous avez de nombreuses props à transmettre.

function AppAvecSpread() {
  const propsPourCarte = {
    nom: "Charlie",
    age: 42,
    ville: "Berlin",
    estActif: true,
    avatarUrl: "/images/charlie.jpg"
  };

  function handleClick() { /* ... */ }

  return (
    

      {/* Utilisation du spread operator pour passer les props */}
      
      {/* Ceci est équivalent à :
      
      */}
    
  );
}

L'opérateur `...propsPourCarte` décompose l'objet `propsPourCarte` et applique chaque clé comme une prop distincte sur le composant `CarteUtilisateur`. Vous pouvez également mélanger le spread operator avec d'autres props définies individuellement (comme `onClickProfil` ici). Si une prop est définie à la fois dans l'objet spreadé et individuellement après, la définition individuelle prend le dessus.

Conclusion : Une syntaxe familière pour la configuration

Passer des props d'un parent à un enfant en React est un processus simple qui réutilise la syntaxe des attributs JSX. En utilisant la notation `nomProp={valeur}` (avec des accolades pour les expressions JavaScript) ou `nomProp="valeur"` (pour les chaînes littérales) sur l'instance du composant enfant dans le JSX du parent, vous pouvez transmettre toutes sortes de données.

L'opérateur spread `...` offre un raccourci pratique pour passer plusieurs props à partir d'un objet existant. Cette flexibilité dans le passage des props est essentielle pour créer des composants configurables et réutilisables.