Ternäres Rendern

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

JSX-Geschweifte Klammern können keine if-Anweisung enthalten, aber sie nehmen den ternären Operator perfekt auf, und dieser deckt fast jedes Entweder-Oder auf einem Bildschirm ab:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

Zuerst die Bedingung, dann der Wert für true, dann der Wert für false. Beide Seiten können vollständige JSX-Elemente sein:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

Kombinieren Sie es mit State und die Seite wechselt live: Drehen Sie den Boolean um, rendert React den anderen Zweig neu.

Aufgabe

Einfach

Erstelle eine Login-Statuszeile.

Füge einen Booleanschen State loggedIn hinzu, der mit false startet.
Der Button (id="login") wechselt den Wert bei jedem Klick.
Der Absatztag (id="status") zeigt mit einem Ternary-Operator Welcome back! an, wenn man eingeloggt ist, und andernfalls Please log in.

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>