Zwei Props

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

Komponenten nehmen routinemäßig mehrere Props entgegen. Listen Sie sie alle in der Destrukturierung auf und mischen Sie sie in das JSX:

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

Achten Sie auf die Typen: name ist ein String (Anführungszeichen), price ist eine Zahl (geschweifte Klammern). Zahlen als Zahlen zu behalten ist wichtig, sobald Sie damit rechnen.

Aufgabe

Einfach

Erstelle eine Produktzeile für den Shop.

Lass Product die Props name und price empfangen und {name} costs ${price} in seinem Absatz rendern.
Rendere in App ein Product mit dem Namen Laptop und dem Preis 999 (als Zahl!). Die Seite sollte Laptop costs $999 anzeigen.

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>