条件渲染

If 块

要有条件地渲染一些标记，我们将其包装在 if 块中：

if

use yew::prelude::*;

html! {
    if true {
        <p>{ "True case" }</p>
    }
};

if - else

use yew::prelude::*;
let some_condition = true;

html! {
    if some_condition {
        <p>{ "True case" }</p>
    } else {
        <p>{ "False case" }</p>
    }
};

if let

use yew::prelude::*;
let some_text = Some("text");

html! {
    if let Some(text) = some_text {
        <p>{ text }</p>
    }
};

if let else

use yew::prelude::*;
let some_text = Some("text");

html! {
    if let Some(text) = some_text {
        <p>{ text }</p>
    } else {
        <p>{ "False case" }</p>
    }
};

let 绑定

大括号体支持在 html 子节点前使用 let 绑定，也可以直接写多个子节点：

use yew::prelude::*;

html! {
    if condition {
        let label = format!("count: {count}");
        <h2>{"Result"}</h2>
        <span>{label}</span>
    } else {
        "nothing"
    }
};

let 绑定必须出现在所有 html 子节点之前，不能与它们交错。

Match 块

match 表达式可以直接在 html! 中使用，与 if/else 遵循相同的模式：

match

use yew::prelude::*;

let value: Option<String> = Some("hello".into());

html! {
    match value {
        Some(text) => <p>{text}</p>,
        None => <p>{"Nothing here"}</p>,
    }
};

if 守卫

use yew::prelude::*;

let value: i32 = 42;

html! {
    match value {
        x if x > 10 => <p>{"Big"}</p>,
        x if x > 0 => <p>{"Small"}</p>,
        _ => <p>{"Non-positive"}</p>,
    }
};

let 绑定

大括号 arm 体支持 let 绑定和多个子节点：

use yew::prelude::*;

html! {
    match data {
        Some(item) => {
            let label = format!("Item: {}", item.name);
            let class = if item.important { "highlight" } else { "normal" };
            <p class={class}>{label}</p>
        }
        None => <p>{"No data"}</p>,
    }
};

单元素 arm 可以省略大括号。含多个子节点或 let 绑定的 arm 需要大括号。

match 支持所有标准 Rust 模式，包括 OR 模式（A | B）、解构和 if 守卫。穷尽性由 Rust 编译器检查。

if / match 体内部的循环

if / else if / else / match 分支体内部的 for、while、loop 与 html! 顶层位置的规则相同，但有一个例外：如果循环体可以被 Rust 完整解析（内部任何位置都没有 html 元素），宏会把这个循环视为 Rust 语句而不是 html 控制流。

最常见的触发情形是循环体里只有一个裸 {expr} 块：

// 可以编译。for 在最外层，被解析为 html-`for`。
html! {
    for _ in 0..9 {
        {my_foo}
    }
}

// 无法编译。for 在 `if` 内部，被解析为 Rust 语句；
// 之后 rustc 会报告循环体返回的类型不是 `()`。
html! {
    if condition {
        for _ in 0..9 {
            {my_foo}
        }
    }
}

把子节点用 html 元素包起来即可保留 html-for 行为：

html! {
    if condition {
        for _ in 0..9 {
            <span>{my_foo}</span>
        }
    }
}

完整的解决方案集合请参见列表。