时隐时现：条件渲染

已登录就显示"欢迎回来"，未登录就显示"请先登录"。应用经常需要根据状态显示不同的界面。这一课我们用 rx.cond，根据 State 的值切换界面。

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 接收三个参数。

• 第三个参数可以省略。写成 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 的三个参数分别是什么。
• 知道省略第三个参数会怎样。
• 知道在界面代码中不能用 if 判断 State 的值。