Props dans React : Transmettre des données aux composants

Introduction

Dans React, les props (abréviation de "properties") sont un concept fondamental pour transmettre des données d'un composant à un autre. Elles vous permettent de créer des composants dynamiques et réutilisables. Considérez les props comme des arguments que vous passez à une fonction ; elles 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 transmettre des props d'un composant parent à un composant enfant.
Accéder aux props et les utiliser 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 argument unique, qui est un objet contenant toutes les props qui lui sont transmises. Par convention, cet objet est nommé props.

Tout d'abord, naviguons vers notre répertoire de projet. Le script d'installation 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 sur la 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 src/Greeting.jsx nouvellement créé. Cela 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 principal App. 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 s'exécuter, affichant "Welcome to My App" et "Hello, World!".

Transmettre une valeur de prop depuis le parent comme name="John"

Dans cette étape, vous apprendrez à transmettre des données du composant parent (App) au composant enfant (Greeting). Cela se fait en utilisant une syntaxe similaire aux attributs en JSX.

Nous voulons transmettre 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 transmettre n'importe quelle expression JavaScript en tant que valeur de prop en l'enveloppant dans des 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, le résultat n'aura pas encore changé. C'est parce que nous avons transmis 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 transmises par le parent. Vous pouvez y accéder en utilisant la notation par point, comme props.propertyName.

Ouvrez le fichier src/Greeting.jsx. Nous allons le modifier pour accéder à props.name et afficher le message de salutation 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. Maintenant, basculez vers l'onglet Web 8080. Vous devriez voir que le message a été mis à jour en "Hello, John!".

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

Déstructurer 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 le déstructurer pour obtenir name directement.

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 disons à JavaScript d'extraire la propriété name de l'objet transmis à 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. Le résultat devrait être exactement le même ("Hello, John!"), mais notre code est désormais plus concis et lisible.

Définir des 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 les 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;

Maintenant, testons cela. 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!" (depuis le composant qui a reçu la prop)
"Hello, Guest!" (depuis le composant qui a utilisé la prop par défaut)

C'est un moyen robuste de rendre vos composants plus prévisibles et d'éviter les erreurs.

Résumé

Félicitations pour avoir terminé ce laboratoire ! Vous avez appris les fondamentaux 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 en utilisant les props.
L'accès aux props au sein d'un composant enfant en utilisant l'objet props.
L'utilisation de la déstructuration pour écrire un code plus propre et plus lisible.
La définition de valeurs par défaut pour les props afin de rendre vos composants plus robustes.

Les props sont une pierre angulaire du développement React, et les maîtriser est une étape clé pour construire des applications complexes. Continuez à pratiquer ces concepts tout au long de votre apprentissage de React.