Passer des props à un composant

Les composants React communiquent entre eux à l’aide deprops. Tout composant parent peut transmettre des informations à ses composants enfants en leur donnant des props. Les props peuvent vous rappeler les attributs HTML, mais vous pouvez y passer n’importe quelle valeur JavaScript, y compris des objets, des tableaux et des fonctions.

Props familières

Les props sont les informations que vous passez à une balise JSX. Par exemple,className,src,alt,widthetheightsont quelques-unes des props que vous pouvez passer à une balise<img>:

Les props que vous pouvez passer à une balise<img>sont prédéfinies (ReactDOM se conformeau standard HTML). Mais vous pouvez passer n’importe quelle prop àvos proprescomposants, comme<Avatar>, pour les personnaliser. Voici comment faire !

Passer des props à un composant

Dans ce code, le composantProfilene passe aucune prop à son composant enfant,Avatar:

Vous pouvez donner des props àAvataren deux étapes.

Étape 1 : passer des props au composant enfant

D’abord, passez quelques props àAvatar. Par exemple, passons deux props :person(un objet) etsize(un nombre) :

Vous pouvez maintenant lire ces props à l’intérieur du composantAvatar.

Étape 2 : lire les props dans le composant enfant

Vous pouvez lire ces props en listant leurs nomsperson, sizeséparés par des virgules entre({et}), directement aprèsfunction Avatar. Cela vous permet de les utiliser dans le code deAvatar, comme vous le feriez avec une variable.

Ajoutez un peu de logique àAvatarqui utilise les propspersonetsizepour le rendu, et c’est terminé.

Vous pouvez maintenant configurerAvatarpour qu’il s’affiche de nombreuses façons différentes avec différentes props. Essayez de modifier les valeurs !

Les props vous permettent de réfléchir aux composants parent et enfant indépendamment. Par exemple, vous pouvez modifier les propsperson ou sizeà l'intérieur deProfilesans avoir à vous soucier de la façon dontAvatarles utilise. De même, vous pouvez modifier la façon dontAvatarutilise ces props, sans regarderProfile.

Vous pouvez considérer les props comme des « boutons » que vous pouvez ajuster. Elles jouent le même rôle que les arguments pour les fonctions—en fait, les propssontle seul argument de votre composant ! Les fonctions de composant React acceptent un seul argument, un objetprops :

Généralement, vous n'avez pas besoin de l'objetpropsentier, vous le déstructurez donc en props individuelles.

Spécifier une valeur par défaut pour une prop

Si vous souhaitez donner une valeur par défaut à une prop pour la remplacer lorsqu'aucune valeur n'est spécifiée, vous pouvez le faire avec la déstructuration en plaçant=et la valeur par défaut juste après le paramètre :

Maintenant, si<Avatar person={...} />est rendu sans la propsize, lasizesera définie à100.

La valeur par défaut n'est utilisée que si la propsizeest manquante ou si vous passezsize={undefined}. Mais si vous passezsize={null}ousize={0}, la valeur par défautne sera pasutilisée.

Transmettre les props avec la syntaxe de décomposition JSX

Parfois, la transmission des props devient très répétitive :

Il n'y a rien de mal à un code répétitif—il peut être plus lisible. Mais parfois, vous pouvez privilégier la concision. Certains composants transmettent toutes leurs props à leurs enfants, comme le fait ceProfileavecAvatar. Comme ils n'utilisent aucune de leurs props directement, il peut être judicieux d'utiliser une syntaxe de « décomposition » plus concise :

Cela transmet toutes les props deProfile à Avatarsans avoir à lister chacun de leurs noms.

Utilisez la syntaxe de décomposition avec modération.Si vous l'utilisez dans tous les autres composants, quelque chose ne va pas. Souvent, cela indique que vous devriez diviser vos composants et passer des enfants en JSX. Plus d'informations à ce sujet ensuite !

Passer du JSX en tant qu'enfants

Il est courant d'imbriquer des balises de navigateur intégrées :

Parfois, vous voudrez imbriquer vos propres composants de la même manière :

Lorsque vous imbriquez du contenu dans une balise JSX, le composant parent reçoit ce contenu dans une prop appeléechildren. Par exemple, le composantCardci-dessous recevra une propchildrendéfinie à<Avatar />et l'affichera dans un div d'encapsulation :

Essayez de remplacer le<Avatar>à l'intérieur de<Card>par du texte pour voir comment le composantCardpeut encapsuler n'importe quel contenu imbriqué. Il n'a pas besoin de "savoir" ce qui est affiché à l'intérieur. Vous verrez ce modèle flexible à de nombreux endroits.

Vous pouvez considérer un composant avec une propchildrencomme ayant un "trou" qui peut être "rempli" par ses composants parents avec du JSX arbitraire. Vous utiliserez souvent la propchildrenpour des encapsulations visuelles : panneaux, grilles, etc.

Illustré parRachel Lee Nabors

Comment les props changent au fil du temps

Le composantClockci-dessous reçoit deux props de son composant parent :colorettime. (Le code du composant parent est omis car il utilisel'état, que nous n'aborderons pas pour l'instant.)

Essayez de changer la couleur dans la boîte de sélection ci-dessous :

Cet exemple illustre queun composant peut recevoir différentes props au fil du temps.Les props ne sont pas toujours statiques ! Ici, la proptimechange chaque seconde, et la propcolorchange lorsque vous sélectionnez une autre couleur. Les props reflètent les données d'un composant à tout moment, et pas seulement au début.

Cependant, les props sontimmuables—un terme de l'informatique signifiant "inchangable". Lorsqu'un composant a besoin de changer ses props (par exemple, en réponse à une interaction utilisateur ou à de nouvelles données), il devra "demander" à son composant parent de lui passerdes props différentes—un nouvel objet ! Ses anciennes props seront alors mises de côté, et finalement le moteur JavaScript récupérera la mémoire qu'elles occupaient.

N'essayez pas de "changer les props".Lorsque vous devez répondre à une saisie utilisateur (comme changer la couleur sélectionnée), vous devrez "définir un état", ce que vous pouvez apprendre dansÉtat : La mémoire d'un composant.

Récapitulatif

• Pour passer des props, ajoutez-les au JSX, comme vous le feriez avec des attributs HTML.
• Pour lire les props, utilisez la syntaxe de décompositionfunction Avatar({ person, size }).
• Vous pouvez spécifier une valeur par défaut commesize = 100, qui est utilisée pour les props manquantes ouundefined.
• Vous pouvez transmettre toutes les props avec la syntaxe de décomposition JSX<Avatar {...props} />, mais n'en abusez pas !
• Du JSX imbriqué comme<Card><Avatar /></Card>apparaîtra comme la propchildrendu composantCard.
• Les props sont des instantanés en lecture seule : chaque rendu reçoit une nouvelle version des props.
• Vous ne pouvez pas modifier les props. Lorsque vous avez besoin d'interactivité, vous devez définir un état.