Działania matematyczne w nawiasach klamrowych

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 7 z 42.

Nawiasy klamrowe nie służą tylko do przechowywania zmiennych: działa dowolne wyrażenie JavaScript. Działania matematyczne, metody łańcuchów znaków, wywołania funkcji:

const price = 6;
const quantity = 5;

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

React oblicza wyrażenie i renderuje wynik. Możesz swobodnie łączyć tekst i nawiasy klamrowe w jednym elemencie:

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

Jedna rzecz, która NIE powinna znaleźć się w nawiasach klamrowych: instrukcje. if, for i tym podobne nie są wyrażeniami. W późniejszym rozdziale poznamy ich zamienniki przyjazne JSX.

Wyzwanie

Początkujący

Zbuduj mały paragon. Komponent definiuje price i quantity.

Spraw, aby akapit z id="total" wyświetlał Total: 30, ale oblicz liczbę na podstawie zmiennych za pomocą * — nie wpisuj 30.

Spróbuj swoich sił

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