Gleiche Komponente, neue Daten

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 19 von 42.

Kombinieren Sie Wiederverwendbarkeit und Props, erhalten Sie das eigentliche Muster: eine Komponente, die mehrmals mit unterschiedlichen Daten gerendert wird.

function Badge({ label }) {
    return <span>{label}</span>;
}

<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />

Drei Badges, drei Beschriftungen, eine Definition. Jede Liste, jedes Menü, jeder Feed und jede Galerie, die du je im Web gesehen hast, folgt diesem Muster (später werden wir die Kopien sogar aus einem Array erzeugen).

Aufgabe

Einfach

Veröffentliche die Werbeabzeichen des Shops.

Lass Badge eine label-Prop erhalten und rendere sie innerhalb seines <span>.
Rendere innerhalb von <div id="badges"> zwei Abzeichen: zuerst mit dem Label New, dann mit dem Label Sale.

Probier es selbst

<!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>