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 Anmeldestatuszeile.

Füge den booleschen Zustand loggedIn hinzu, der mit false beginnt.
Die Schaltfläche (id="login") schaltet ihn bei jedem Klick um.
Der Absatz (id="status") zeigt bei Anmeldung Welcome back! und andernfalls Please log in an, mit einem ternären Operator.

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>