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