メインコンテンツまでスキップ
Version: 0.18.0

Literals and Expressions

リテラル

式がDisplayを実装した型を解決する場合、文字列に変換されて DOM にTextノードとして挿入されます。

テキストは式として処理されるため、全ての表示される内容は{}ブロックによって囲まれる必要があります。 これは Yew のアプリと通常の HTML の構文で最も異なる点です。

let text = "lorem ipsum";
html!{
<>
<div>{text}</div>
<div>{"dolor sit"}</div>
<span>{42}</span>
</>
}

HTML に{}ブロックを使って式を挿入することができます。

html! {
<div>
{
if show_link {
html! {
<a href="https://example.com">{"Link"}</a>
}
} else {
html! {}
}
}
</div>
}

式を関数やクロージャに分離するのはコードの可読性の観点から有効なことがあります。

let show_link = true;
let maybe_display_link = move || -> Html {
if show_link {
html! {
<a href="https://example.com">{"Link"}</a>
}
} else {
html! {}
}
};

html! {
<div>{maybe_display_link()}</div>
}