出たり消えたり：条件付きレンダリング

ログインしていれば「ようこそ」、していなければ「ログインしてください」。アプリでは、状態に応じて違う画面を見せたい場面がよくあります。この回では、Stateの値に応じて画面を切り替えるrx.condを使います。

2-1. rx.condで画面を切り替える (3分)

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は3つの引数を受け取ります。

• 3つ目の引数は省略できます。rx.cond(LoginState.logged_in, rx.text("Welcome!"))と書くと、ログインしているときだけ文字が表示され、そうでないときは何も表示されません。
• ハンドラtoggle_loginは、1限目と同じイベントハンドラです。notで真と偽を反転させています。

2-2. でも、なぜ普通のifを使わないの？ (2分)

Pythonなら、こう書きたくなるところです。

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

このコードは動きません。画面の関数はアプリの起動時に一度だけ実行されますが、その時点ではまだユーザーがログインしているかどうかわからないからです。rx.condは「あとでブラウザで値を見て選んでね」という指示を画面に埋め込んでおきます。

なぜこうなるのかは、4限目で詳しく解説します。今は「画面のコードでStateの値によって分岐させるときはrx.cond」とだけ覚えておいてください。

練習問題

1. show_loginで、ボタンの文字も状態に応じて「Log In」/「Log Out」に切り替わるようにしてみましょう。ヒント：ボタンの子要素の位置にrx.cond(...)を入れます。
2. rx.condはpropsの値にも使えます。見出しのcolorを、ログインしていれば"green"、そうでなければ"gray"にしてみましょう。

この回のチェックリスト

• rx.condの3つの引数がそれぞれ何かを説明できる。
• 3つ目の引数を省略するとどうなるかがわかる。
• 画面のコードでStateの値にifを使ってはいけないことがわかる。