Klammern in Attributen

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

Geschweifte Klammern funktionieren auch in Attributen. Tauschen Sie die Anführungszeichen gegen geschweifte Klammern aus, und der Attributwert stammt aus JavaScript:

const level = 'warning';

return <p className={level}>Check this!</p>;

Jetzt entspricht die Klasse des Absatzes dem Wert der Variablen: Ändern Sie level zu 'error' und die Klasse passt sich an. So wechseln React-Apps Stile basierend auf Daten.

Beachten Sie die Syntax genau: className={level}, keine Anführungszeichen um die geschweiften Klammern. className="{level}" (mit Anführungszeichen) würde die Klasse auf den wörtlichen Text {level} setzen.

Aufgabe

Einfach

Der Alert-Absatz sollte seine CSS-Klasse aus der Variable level erhalten.

Setze className des Absatzes mithilfe geschweifter Klammern auf den Wert von level (seine Klasse muss letztendlich warning sein).
Schreibe nicht das Wort warning in das Attribut. Verwende die Variable.

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>