条件渲染

eastspire小于 1 分钟euvuirustwasmusage-introductionconditional

if 条件渲染

let show_details: Signal<bool> = use_signal(|| false);
let show_details_updater: Signal<bool> = show_details;

rsx! {
    button {
        onclick: move |_event: NativeEvent| {
            let current: bool = show_details_updater.get();
            show_details_updater.set(!current);
        }
        "Toggle"
    }
    if {show_details.get()} {
        div {
            "Details visible"
        }
    } else {
        ""
    }
}

注意

if 表达式的 else 分支不能省略，空内容请使用 ""。

match 条件渲染

let user_type: Signal<String> = use_signal(|| "guest".to_string());

rsx! {
    match {user_type.get().as_str()} {
        "guest" => {
            div { "Welcome, guest!" }
        }
        "user" => {
            div { "Hello, user!" }
        }
        _ => {
            div { "Welcome, administrator!" }
        }
    }
}

提示

match 必须包含 _ 通配分支，否则编译不通过。