条件レンダリング

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 バインディングと複数の子要素

if/else、match、for のブレース付き本体はすべて、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 バインディング

ブレース付きのアーム本体では、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>,
    }
};

単一要素のアームはブレースを省略できます。複数の子要素や let バインディングを持つアームにはブレースが必要です。

match は OR パターン（A | B）、分割代入、if ガードを含む、すべての標準的な Rust パターンをサポートします。網羅性は Rust コンパイラによってチェックされます。