Stesso componente, nuovi dati
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 19 di 42.
Metti insieme il riutilizzo e le props e ottieni il vero schema: un componente, renderizzato molte volte con dati diversi.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />Tre badge, tre etichette, una definizione. Ogni elenco, menu, feed e galleria che tu abbia mai visto sul web segue questo schema (più avanti genereremo persino le copie da un array).
Sfida
FacileRealizza i badge promozionali del negozio.
- Fai in modo che
Badgericeva una proplabele la visualizzi al suo interno<span>. - All'interno di
<div id="badges">visualizza due badge: il primo con etichettaNew, poi quello con etichettaSale.
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 React4Props
Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX