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 labels, eine Definition. Jede Liste, jedes Menü, jeder Feed und jede Galerie, die Sie je im Web gesehen haben, folgt diesem Muster (später werden wir die Kopien sogar aus einem Array generieren).

Aufgabe

Einfach

Liefere die Promo-Badges des Shops aus.

Richte Badge so ein, dass es eine label-Prop empfängt und diese innerhalb seines <span> rendert.
Rendere innerhalb von <div id="badges"> zwei Badges: 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>