Mal da, mal weg: bedingtes Rendering

Eingeloggt: „Willkommen“. Nicht eingeloggt: „Bitte einloggen“. Apps müssen oft je nach Zustand etwas anderes anzeigen. In dieser Lektion verwendest du rx.cond, um die Oberfläche abhängig von einem State-Wert zu verändern.

2-1. Die Oberfläche mit rx.cond umschalten (3 Min.)

class LoginState(rx.State):
    logged_in: bool = False

    @rx.event
    def toggle_login(self):
        self.logged_in = not self.logged_in


def show_login():
    return rx.box(
        rx.cond(
            LoginState.logged_in,
            rx.heading("Logged In", as_="h2"),
            rx.heading("Not Logged In", as_="h2"),
        ),
        rx.button("Toggle Login", on_click=LoginState.toggle_login),
    )

rx.cond nimmt drei Argumente entgegen.

• Das dritte Argument ist optional. Schreibst du rx.cond(LoginState.logged_in, rx.text("Welcome!")), erscheint der Text nur im eingeloggten Zustand, andernfalls wird gar nichts angezeigt.
• Der Handler toggle_login ist ein ganz normaler Event-Handler wie in Lektion 1. Mit not kehrt er wahr und falsch um.

2-2. Aber warum nicht einfach if? (2 Min.)

In Python würdest du wahrscheinlich Folgendes schreiben wollen.

def show_login():
    if LoginState.logged_in:
        return rx.heading("Logged In", as_="h2")
    return rx.heading("Not Logged In", as_="h2")

Dieser Code funktioniert nicht. UI-Funktionen laufen genau einmal, nämlich beim Start der App, und zu diesem Zeitpunkt weiß noch niemand, ob ein Nutzer eingeloggt ist. rx.cond hinterlegt in der Oberfläche stattdessen die Anweisung: „Schau später im Browser auf den Wert und wähle dann aus.“

Woran das genau liegt, klären wir ausführlich in Lektion 4. Für jetzt merkst du dir nur: „Für Verzweigungen im UI-Code abhängig von State-Werten nimmst du rx.cond.“

Übungen

1. Sorge in show_login dafür, dass auch die Beschriftung des Buttons je nach Zustand zwischen „Log In“ und „Log Out“ wechselt. Tipp: Setz rx.cond(...) an die Stelle des Kinds des Buttons.
2. rx.cond funktioniert auch für Prop-Werte. Lass die color der Überschrift im eingeloggten Zustand "green" und sonst "gray" sein.

Checkliste zu dieser Lektion

• Ich kann erklären, wofür die drei Argumente von rx.cond jeweils stehen.
• Ich weiß, was passiert, wenn ich das dritte Argument weglasse.
• Ich weiß, dass ich im UI-Code kein if mit State-Werten verwenden darf.