Due props
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 18 di 42.
I componenti ricevono spesso diverse props. Elencale tutte nella destrutturazione e includile nel JSX:
function Product({ name, price }) {
return <p>{name} costs ${price}</p>;
}
<Product name="Laptop" price={999} />
// visualizza: Laptop costs $999Nota i tipi: name è una stringa (virgolette), price è un numero (parentesi graffe). Mantenere i numeri come numeri è importante quando fai calcoli con essi.
Sfida
FacileCrea una linea di prodotti per il negozio.
- Fai in modo che
Productriceva le propsnameepricee visualizzi{name} costs ${price}nel suo paragrafo. - In App, visualizza un Product con name
Laptope price999(come numero!). La pagina dovrebbe mostrareLaptop costs $999.
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