Lecture des props dans les composants fonctionnels et classe

Récupérer les données transmises

Nous avons vu comment un composant parent peut passer des données à un composant enfant en utilisant des attributs JSX, qui deviennent les props de l'enfant. Maintenant, la question est : comment le composant enfant accède-t-il et utilise-t-il ces données qui lui ont été transmises ? La manière d'accéder aux props diffère légèrement selon que vous travaillez avec un composant fonctionnel ou un composant classe.

Dans les deux cas, React regroupe toutes les props passées au composant dans un seul objet. Il suffit ensuite d'accéder aux propriétés de cet objet pour récupérer les valeurs spécifiques envoyées par le parent.

Accès aux props dans les Composants Fonctionnels

Pour les composants fonctionnels, l'approche est très directe : l'objet contenant toutes les props est automatiquement passé comme premier (et unique) argument à la fonction composant. Par convention, cet argument est généralement nommé `props`.

Une fois cet objet `props` reçu, vous pouvez accéder aux différentes propriétés en utilisant la notation pointée standard de JavaScript (`props.nomDeLaProp`).

// Composant enfant fonctionnel : SalutationFonctionnelle.js
import React from 'react';

// L'objet props est reçu comme premier argument
function SalutationFonctionnelle(props) {
  // Accès aux props via props.nomDeLaProp
  const message = props.message || "Bonjour"; // Utilise une valeur par défaut si props.message n'existe pas
  const nom = props.nomUtilisateur || "Visiteur";

  return (
    

      
{message}, {nom} !
      {props.afficherDate && 
         ({new Date().toLocaleDateString()})
      }
    
  );
}

export default SalutationFonctionnelle;

// Utilisation par le parent (exemple)
// import SalutationFonctionnelle from './SalutationFonctionnelle';
// 
//  // message et afficherDate utiliseront les valeurs par défaut/implicites

Déstructuration des props (Pratique courante) : Pour éviter de répéter `props.` constamment et pour rendre le code plus lisible en voyant immédiatement quelles props sont utilisées, il est très courant d'utiliser la déstructuration d'objets ES6 directement dans la signature de la fonction ou au début de celle-ci.

// Même composant avec déstructuration dans la signature
function SalutationFonctionnelleDestructuree({ message = "Bonjour", nomUtilisateur = "Visiteur", afficherDate }) {
  // Les props sont directement disponibles comme variables
  // On a aussi appliqué des valeurs par défaut ici
  return (
    

      
{message}, {nomUtilisateur} !
      {afficherDate && 
         ({new Date().toLocaleDateString()})
      }
    
  );
}

// Ou déstructuration dans le corps de la fonction
function SalutationFonctionnelleDestructureeCorps(props) {
  const { message = "Bonjour", nomUtilisateur = "Visiteur", afficherDate } = props;
  // ... même return que ci-dessus
}

export default SalutationFonctionnelleDestructuree;

La déstructuration rend le code plus propre et est la méthode préférée dans la plupart des cas pour accéder aux props dans les composants fonctionnels.

Accès aux props dans les Composants Classe

Pour les composants classe, l'objet contenant les props est automatiquement disponible via la propriété `this.props` à l'intérieur de la classe. Vous pouvez y accéder depuis n'importe quelle méthode de la classe, y compris (et surtout) la méthode `render()`.

// Composant enfant classe : SalutationClasse.js
import React from 'react';

class SalutationClasse extends React.Component {
  render() {
    // Accès aux props via this.props.nomDeLaProp
    const message = this.props.message || "Bonjour";
    const nom = this.props.nomUtilisateur || "Visiteur";

    return (
      

        
{message}, {nom} !
        {this.props.afficherDate && 
           ({new Date().toLocaleDateString()})
        }
      
    );
  }
}

export default SalutationClasse;

// Utilisation par le parent (identique à l'exemple fonctionnel)
// import SalutationClasse from './SalutationClasse';
// 

Déstructuration dans les composants classe : Vous pouvez également utiliser la déstructuration à l'intérieur de la méthode `render` (ou d'autres méthodes) pour simplifier l'accès, bien que ce soit légèrement moins direct que dans les composants fonctionnels.

class SalutationClasseDestructuree extends React.Component {
  render() {
    // Déstructuration de this.props
    const { message = "Bonjour", nomUtilisateur = "Visiteur", afficherDate } = this.props;

    return (
      

        
{message}, {nomUtilisateur} !
        {afficherDate && 
           ({new Date().toLocaleDateString()})
        }
      
    );
  }
}
export default SalutationClasseDestructuree;

Accès dans le `constructor` : Si vous avez besoin d'accéder aux props dans le `constructor` (par exemple, pour initialiser l'état basé sur une prop), vous devez vous assurer de passer `props` au `constructor` et à l'appel `super(props)`.

constructor(props) {
  super(props); // Indispensable pour que this.props soit défini ici
  this.state = {
    nomInitial: props.nomUtilisateur || '' 
  };
}

Conclusion : Un accès simple aux données parentales

Accéder aux props dans un composant enfant est une opération fondamentale et simple en React. Que ce soit via l'argument `props` dans un composant fonctionnel (souvent combiné avec la déstructuration pour plus de clarté) ou via `this.props` dans un composant classe, React fournit un moyen cohérent pour que les composants enfants lisent les données et configurations qui leur sont transmises par leurs parents.

Cette capacité à lire les props est ce qui permet aux composants d'être dynamiques, configurables et de s'adapter aux informations spécifiques de leur contexte d'utilisation, rendant possible la construction d'interfaces complexes et réutilisables.