Dans l'écosystème React, les props (propriétés) représentent le mécanisme fondamental pour transférer des données d'un composant parent vers un composant enfant. Elles constituent une interface de communication unidirectionnelle et doivent être traitées comme des données en lecture seule. Toute tentative de modification directe des props au sein d'un composent entraînera une erreur, garantissant ainsi la prévisibilité du flux de données.

Utilisation Fondamentale des Props

Lorsqu'on utilise des composants basés sur les classes, les props sont accessibles via this.props. Si un constructeur est défini, il est impératif de transmettre les props à la méthode super(props) pour pouvoir y accéder correctement via this au sein du constructeur.

class ProfilUtilisateur extends React.Component {
    constructor(valeurs) {
        // L'appel à super(valeurs) permet d'utiliser this.props dans le constructeur
        super(valeurs);
        console.log('Initialisation avec les props :', this.props);
    }

    render() {
        const { pseudo, niveau, grade } = this.props;
        return (
            <div>
                <ul>
                    <li>Utilisateur : {pseudo}</li>
                    <li>Niveau : {niveau}</li>
                    <li>Rang : {grade}</li>
                </ul>
            </div>
        );
    }
}

// Rendu classique en passant les attributs individuellement
ReactDOM.render(
    <ProfilUtilisateur pseudo="Marc" niveau={25} grade="Or" />, 
    document.getElementById('conteneur1')
);

// Utilisation de l'opérateur de décomposition (spread operator) pour passer un objet complet
const donneesJoueur = { pseudo: 'Sophie', niveau: 42, grade: 'Diamant' };
ReactDOM.render(
    <ProfilUtilisateur {...donneesJoueur} />, 
    document.getElementById('conteneur2')
);

Contrôle des Types et Valeurs par Défaut

Pour sécuriser le développement, il est recommandé de définir les types attendus pour chaque propriété ainsi que des valeurs de repli en cas d'absence de données. Cela se fait généralement via la bibliothèque prop-types.

class Membre extends React.Component {
    render() {
        return (
            <div>Détails du membre : {this.props.nom}</div>
        );
    }
}

// Définition des contraintes sur les propriétés
Membre.propTypes = {
    nom: PropTypes.string.isRequired, // Chaîne de caractères obligatoire
    age: PropTypes.number,           // Nombre optionnel
    action: PropTypes.func           // Fonction optionnelle
};

// Définition des valeurs initiales par défaut
Membre.defaultProps = {
    age: 20,
    nom: 'Anonyme'
};

Syntaxe Moderne avec Propriétés Statiques

Une aproche plus propre consiste à intégrer les défiintions de propTypes et defaultProps directement à l'intérieur de la classe en utilisant le mot-clé static. Cela permet de regrouper toute la configuration du composant en un seul bloc logique.

class CarteProduit extends React.Component {
    // Validation des types directement dans la classe
    static propTypes = {
        titre: PropTypes.string.isRequired,
        prix: PropTypes.number.isRequired,
        categorie: PropTypes.string
    };

    // Valeurs par défaut intégrées
    static defaultProps = {
        categorie: 'Général'
    };

    render() {
        const { titre, prix, categorie } = this.props;
        return (
            <div className="card">
                <h2>{titre}</h2>
                <p>Prix : {prix} €</p>
                <span>Rayon : {categorie}</span>
            </div>
        );
    }
}