Passer des props à un composant

Props standardisées

Les props sont des informations que vous passez à une balise JSX. Par exemple, une balise <img> compte parmi ses props className, src, alt, width et height :

Les props que vous pouvez passer à une balise <img> sont bien définies (ReactDOM respecte le standard HTML). Mais vous pouvez passer les props de votre choix à vos propres composants, tels qu’<Avatar>, pour les personnaliser. Voici comment faire !

Passer des props à un composant

Dans le code qui suit, le composant Profile ne passe aucune prop à son composant fils, Avatar :

export default function Profile() {
  return (
    <Avatar />
  );
}

Vous pouvez donner quelques props à Avatar en deux étapes.

Étape 1 : passez des props au composant enfant

Commencez par passer quelques props à Avatar. Par exemple, passons deux props : person (un objet) et size (un nombre) :

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Vous pouvez maintenant lire ces props au sein du composant Avatar.

Étape 2 : lisez les props dans le composant enfant

Vous pouvez lire ces props en listant leurs noms person, size séparés par des virgules entre ({ et }) immédiatement après function Avatar. Ça vous permet de les utiliser dans le code d’Avatar, comme si vous aviez une variable locale.

function Avatar({ person, size }) {
  // person et size sont disponibles ici
}

Ajoutez un peu de logique à Avatar qui se base sur les props person et size pour le rendu, et vous y serez !

Vous pouvez désormais configurer Avatar pour s’afficher de différentes façons selon les valeurs de ses props. Essayez de jouer avec ces valeurs !

Les props vous permettent de réfléchir aux composants parent et enfant indépendamment. Par exemple, vous pouvez modifier les props person et size au sein de Profile sans avoir à vous préoccuper de comment Avatar les utilise. De la même façon, vous pouvez modifier l’utilisation interne de ces props par Avatar sans vous préoccuper de Profile.

Vous pouvez concevoir les props comme des « molettes » que vous pouvez ajuster. Elles jouent le même rôle que les arguments des fonctions — en fait, les props sont le seul argument de votre composant ! Les fonctions composants React ne prennent qu’un argument, qui est l’objet props :

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Le plus souvent vous n’aurez pas besoin de l’objet props lui-même dans son intégralité, vous le déstructurerez donc en props individuelles.

function Avatar({ person, size }) {
  // ...
}

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

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

Si vous souhaitez donner une valeur par défaut à une prop pour qu’elle l’exploite lorsque le composant parent ne fournit pas de valeur, vous pouvez le faire dans la déstructuration en ajoutant = suivi de la valeur par défaut, juste après le nom de la prop :

function Avatar({ person, size = 100 }) {
  // ...
}

À présent, si <Avatar person={...} /> est utilisé sans prop size, la size sera définie à 100.

La valeur par défaut n’est utilisée que si la prop size est manquante ou que vous passez size={undefined}. Mais si vous passez size={null} ou size={0}, la valeur par défaut ne sera pas utilisée.

Transmettre des props avec la syntaxe de spread JSX

Il peut arriver que passer des props soit très répétitif :

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

Un tel code répétitif n’est pas problématique en soi — il peut même être plus lisible. Mais vous pourriez préférer la concision. Certains composants refilent toutes leurs props à leurs enfants, comme ce Profile le fait avec Avatar. Dans la mesure où ils n’utilisent pas leurs props directement, il peut être pertinent de recourir à la syntaxe de spread, nettement plus concise :

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

Ça transmet toutes les props de Profile à Avatar sans avoir à les lister chacune par leur nom.

Utilisez la syntaxe de spread avec discernement. Si vous l’utilisez dans de nombreux composants, c’est que quelque chose ne va pas. Le plus souvent, c’est un signe que vous devriez découper vos composants et passer du JSX enfant. On va voir comment tout de suite !

Passer du JSX comme enfant

On imbrique fréquemment les balises natives du navigateur :

<div>
  <img />
</div>

Vous voudrez parfois faire de même avec vos propres composants :

<Card>
  <Avatar />
</Card>

Lorsque vous imbriquez du contenu dans une balise JSX, le composant parent reçoit ce contenu sous forme d’une prop appelée children. Par exemple, le composant Card ci-dessous recevra une prop children qui vaudra <Avatar /> et l’affichera dans une div d’enrobage :

Tentez de remplacer le <Avatar> au sein de <Card> avec du texte pour constater que le composant Card peut enrober n’importe quel contenu imbriqué. Il n’a pas besoin de « savoir » ce qui est affiché à l’intérieur de lui. Vous retrouverez cette approche flexible dans de nombreux endroits.

Voyez la prop children d’un composant comme une sorte de « trou » qui peut être « rempli » par les composants parents avec du JSX quelconque. Vous utiliserez souvent la prop children pour des enrobages visuels : panneaux, grilles, etc.

Les props changent avec le temps

Le composant Clock ci-dessous reçoit deux props de son composant parent : color et time. (Le code du composant parent est laissé de côté parce qu’il utilise un état, concept que nous n’avons pas encore exploré.)

Essayez de modifier la couleur dans la liste déroulante :

Cet exemple illustre le fait qu’un composant peut recevoir des props différentes au fil du temps. Les props ne sont pas toujours figées ! Ici la prop time change à chaque seconde, et la prop color change lorsque vous sélectionnez une autre couleur. Les props reflètent les données du composant à un instant donné, plutôt que seulement leurs valeurs au démarrage.

Cependant, les props sont immuables — un terme qui en informatique signifie « non modifiable ». Lorsqu’un composant a besoin de changer ses props (par exemple, en réponse à une interaction utilisateur ou à de nouvelles données), il doit « demander » à son composant parent de lui passer des props différentes — et donc un nouvel objet ! Ses anciennes props seront alors mises au rebut, et le moteur JavaScript récupèrera à terme la mémoire qui leur était associée.

N’essayez pas de « changer les props ». Lorsque vous aurez besoin de réagir à une interaction utilisateur (telle qu’un changement de la couleur sélectionnée), vous devrez « mettre à jour l’état », ce que vous apprendrez à faire dans L’état : la mémoire d’un composant.