Zusammenfassung: Props
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 21 von 42.
Aufgabe
EinfachKapitelzusammenfassung: Ein winziges Menü, aufgebaut aus Props und Children.
- Lasse
Itemdie Propsnameundpriceempfangen und{name}: ${price}in seinem<li>rendern. - Lasse
Cardein<div>mitclassName="card"rendern, das seinechildrenanzeigt. - Verwende in App
<Card>...</Card>, um das<ul id="menu">zu umschließen, und rendere darin zwei Items: NameTeamit Preis3, dann NameCakemit Preis5(Preise als Zahlen!).
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>Alle Lektionen in Grundlagen
1Lerne React kennen
Was ist React?Deine erste KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen4Props
Was sind Props?Props übergebenZwei PropsGleiche Komponente, neue DatenDie Children-PropZusammenfassung: Props