Passare le props
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 17 di 42.
Colleghiamo una prop da un capo all’altro. Tre passaggi, sempre gli stessi:
// 1. ricevilo
function Greeting({ name }) {
// 2. usalo
return <p>Hello, {name}!</p>;
}
// 3. passalo
<Greeting name="Ada" />Le stringhe si inseriscono tra virgolette. Numeri ed espressioni usano le parentesi graffe, la stessa regola degli attributi:
<Score points={97} />
Sfida
PrincipianteIl componente Greeting ignora tutto ciò che gli passi.
- Fai in modo che
Greetingriceva una proprietànamee visualizziHello, {name}!nel suo paragrafo. - In App, passa
name="Ada"in modo che la pagina mostriHello, Ada!.
Provalo tu
<!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>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX