Mathematik in Klammern

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

Die geschweiften Klammern enthalten nicht nur Variablen: jeder JavaScript-Ausdruck funktioniert. Mathematik, String-Methoden, Funktionsaufrufe:

const price = 6;
const quantity = 5;

return <p>Total: {price * quantity}</p>;
// rendert: Total: 30

React wertet den Ausdruck aus und rendert das Ergebnis. Sie können Text und geschweifte Klammern frei in einem Element kombinieren:

<p>{quantity} items at {price} each</p>

Eine Sache, die NICHT in geschweifte Klammern gehört: Anweisungen. if, for und Co. sind keine Ausdrücke. Wir werden ihren JSX-freundlichen Ersatz in einem späteren Kapitel kennenlernen.

Aufgabe

Anfänger

Erstelle einen kleinen Beleg. Die Komponente definiert price und quantity.

Sorge dafür, dass der Paragraph mit id="total" Total: 30 rendert, aber berechne die Zahl aus den Variablen mit *, tippe nicht 30 ein.

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>