Théorie

Les props (abréviation de propriétés) sont un moyen de transmettre des données d'un composant parent à un composant enfant. Elles sont similaires aux arguments de fonction. Les props vous permettent de personnaliser et de configurer les composants enfants en fonction des exigences du composant parent.

Pourquoi avons-nous besoin des Props?

Les props rendent les composants réutilisables et configurables. Elles permettent au composant parent de communiquer avec ses enfants en leur transmettant des données et des fonctionnalités.

Travailler avec les Props

Passer des Props

Nous passons des props en les incluant comme attributs lorsque nous utilisons un composant.

Dans cet exemple, le ParentComponent passe une prop appelée message avec la valeur 'Hello from parent' à ChildComponent.

Réception des Props

Dans le composant récepteur (ChildComponent dans ce cas), nous pouvons accéder aux props passées en tant que propriétés de l'objet props.

Le ChildComponent reçoit la prop message et l'affiche dans un composant Text.

Props par Défaut

Nous pouvons définir des valeurs par défaut pour les props au cas où elles ne seraient pas fournies.

Ici, si message n'est pas fourni en tant que prop, il prend par défaut la valeur 'Default Message'.

Exemple

Considérons un scénario où nous avons un composant UserProfile qui reçoit les données utilisateur en tant que props.

Maintenant, lorsque nous utilisons UserProfile dans le composant App, nous pouvons passer les données utilisateur en tant que props :

En Pratique