Passer des props
Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 17 sur 42.
Relions une prop de bout en bout. Trois étapes, toujours les mêmes :
// 1. le recevoir
function Greeting({ name }) {
// 2. l'utiliser
return <p>Hello, {name}!</p>;
}
// 3. le passer
<Greeting name="Ada" />Les chaînes de caractères sont transmises entre guillemets. Les nombres et les expressions utilisent des accolades, la même règle que pour les attributs :
<Score points={97} />
Défi
DébutantLe composant Greeting ignore tout ce que vous lui transmettez.
- Faites en sorte que
Greetingsorte un propnameet afficheHello, {name}!dans son paragraphe. - Dans App, transmettez
name="Ada"pour que la page afficheHello, Ada!.
Essayez vous-même
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Les fondamentaux
1Découvrez React
Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React