Props React : Passer des données aux composants

Introduction

Dans React, les props (abréviation de "properties" ou propriétés) sont un concept fondamental pour passer des données d'un composant à un autre. Ils vous permettent de créer des composants dynamiques et réutilisables. Considérez les props comme des arguments que vous passez à une fonction ; ils permettent à un composant parent de configurer ses composants enfants. Les props sont en lecture seule, ce qui signifie qu'un composant enfant ne doit jamais modifier les props qu'il reçoit.

Dans ce laboratoire, vous apprendrez à :

Définir et passer des props d'un composant parent à un composant enfant.
Accéder et utiliser les props au sein d'un composant enfant.
Utiliser la déstructuration pour rendre votre code plus propre.
Définir des valeurs par défaut pour les props.

Commençons !

Définir le paramètre props dans un composant fonctionnel

Dans cette étape, vous allez créer un nouveau composant enfant et le préparer à recevoir des props. Les composants fonctionnels dans React peuvent accepter un seul argument, qui est un objet contenant toutes les props qui lui sont passées. Par convention, cet objet est nommé props.

Tout d'abord, naviguons vers le répertoire de notre projet. Le script de configuration a déjà créé un projet nommé my-app.

cd ~/project/my-app

Ensuite, nous devons installer les dépendances du projet.

npm install

Maintenant, créons un nouveau fichier de composant. Dans l'explorateur de fichiers à gauche, naviguez vers le dossier src. Créez un nouveau fichier à l'intérieur de src et nommez-le Greeting.jsx.

Ajoutez le code suivant à votre fichier nouvellement créé src/Greeting.jsx. Ceci définit un composant fonctionnel simple qui accepte un paramètre props.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

Ensuite, nous devons importer et utiliser ce nouveau composant dans notre composant App principal. Ouvrez le fichier src/App.jsx et modifiez-le pour qu'il ressemble à ceci :

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

Maintenant, lançons le serveur de développement pour voir notre application.

npm run dev -- --host 0.0.0.0 --port 8080

Après avoir exécuté la commande, basculez vers l'onglet Web 8080 dans le coin supérieur gauche de l'interface. Vous devriez voir votre application en cours d'exécution, affichant "Welcome to My App" et "Hello, World!".

Passer la valeur de prop depuis le parent comme name="John"

Dans cette étape, vous apprendrez à passer des données du composant parent (App) au composant enfant (Greeting). Ceci est fait en utilisant une syntaxe similaire à celle des attributs en JSX.

Nous voulons passer le nom d'une personne à notre composant Greeting afin qu'il puisse afficher un message personnalisé.

Ouvrez le fichier src/App.jsx. Modifiez la ligne <Greeting /> pour inclure une prop name avec la valeur "John".

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

Ici, name="John" est la prop. name est la clé de la prop, et "John" est sa valeur. Vous pouvez passer n'importe quelle expression JavaScript comme valeur de prop en l'entourant d'accolades {}. Pour les chaînes de caractères, les guillemets suffisent.

Après avoir enregistré le fichier, le serveur de développement se rechargera automatiquement. Si vous vérifiez l'onglet Web 8080, la sortie n'aura pas encore changé. C'est parce que nous avons passé la prop, mais que le composant Greeting ne l'utilise pas encore. Nous corrigerons cela à l'étape suivante.

Accéder à la prop dans l'enfant avec props.name

Maintenant que le composant Greeting reçoit la prop name, utilisons-la. L'objet props dans le composant enfant contient toutes les propriétés passées par le parent. Vous pouvez y accéder en utilisant la notation par points, comme props.propertyName.

Ouvrez le fichier src/Greeting.jsx. Nous allons le modifier pour accéder à props.name et afficher le message personnalisé. Utilisez des accolades {} pour intégrer l'expression JavaScript directement dans votre JSX.

Mettez à jour src/Greeting.jsx avec le code suivant :

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Enregistrez le fichier. Ensuite, basculez vers l'onglet Web 8080. Vous devriez voir le message mis à jour en "Hello, John!".

Cela démontre le flux de données de base dans React : du parent à l'enfant via les props.

Désassembler les props dans le paramètre de fonction

Écrire props.name, props.age, etc., peut devenir répétitif, surtout si un composant reçoit de nombreuses props. Une approche plus propre et plus courante consiste à utiliser la déstructuration ES6 pour extraire les propriétés de l'objet props directement dans la liste des paramètres de la fonction.

Refactorisons le composant Greeting pour utiliser la déstructuration.

Ouvrez src/Greeting.jsx et modifiez la signature de la fonction. Au lieu d'accepter props, nous allons la déstructurer pour obtenir directement name.

Mettez à jour le fichier pour qu'il ressemble à ceci :

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

En remplaçant (props) par ({ name }), nous indiquons à JavaScript d'extraire la propriété name de l'objet passé à la fonction. Cela rend le corps du composant plus propre, car nous pouvons maintenant utiliser name directement au lieu de props.name.

Enregistrez le fichier et vérifiez l'onglet Web 8080. La sortie devrait être exactement la même ("Hello, John!"), mais notre code est maintenant plus concis et lisible.

Définir les props par défaut avec un paramètre par défaut

Que se passe-t-il si un composant parent ne transmet pas une prop requise ? La valeur sera undefined, ce qui peut entraîner des erreurs ou une interface utilisateur inattendue. Pour éviter cela, vous pouvez spécifier des valeurs par défaut pour les props.

Pour les composants fonctionnels, vous pouvez utiliser des paramètres par défaut dans la signature de la fonction.

Définissons un nom par défaut pour notre composant Greeting. Ouvrez src/Greeting.jsx et modifiez le paramètre de la fonction pour inclure une valeur par défaut. Nous définirons le nom par défaut sur "Guest".

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Testons cela maintenant. Ouvrez src/App.jsx et ajoutez un autre composant <Greeting />, mais cette fois, ne lui transmettez pas de prop name.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

Enregistrez les deux fichiers. Allez dans l'onglet Web 8080. Vous devriez maintenant voir deux salutations :

"Hello, John!" (provenant du composant qui a reçu la prop)
"Hello, Guest!" (provenant du composant qui a utilisé la prop par défaut)

C'est une manière robuste de rendre vos composants plus prévisibles et d'éviter les erreurs.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez appris les bases de l'utilisation des props dans React pour créer des composants réutilisables et dynamiques.

Dans ce laboratoire, vous avez pratiqué :

La transmission de données d'un composant parent à un composant enfant à l'aide de props.
L'accès aux props dans un composant enfant en utilisant l'objet props.
L'utilisation de la déstructuration pour écrire du code plus propre et plus lisible.
La définition de valeurs par défaut pour les props avec defaultProps afin de rendre vos composants plus robustes.

Les props sont une pierre angulaire du développement React, et leur maîtrise est une étape clé dans la construction d'applications complexes. Continuez à pratiquer ces concepts tout au long de votre parcours avec React.