html! による HTML

html! マクロを使用して HTML に似た表現を記述できます。内部では Yew は生成する DOM を Rust コードに変換します。

use yew::prelude::*;

let my_header: Html = html! {
    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
};

format 式と同様に、周囲のコンテキストからの値を中括弧を使用して HTML に簡単に埋め込むことができます。

use yew::prelude::*;

let header_text = "Hello world".to_string();
let header_html: Html = html! {
    <h1>{header_text}</h1>
};

let count: usize = 5;
let counter_html: Html = html! {
    <p>{"My age is: "}{count}</p>
};

let combined_html: Html = html! {
    <div>{header_html}{counter_html}</div>
};

html! では 1 つのラッピングノードのみを返せるという重大なルールがあります。複数の要素を含むリストをレンダリングする場合、html! はフラグメントを許可します。フラグメントは名前のないタグで、それ自体では HTML 要素を生成しません。

無効

use yew::html;

// error: only one root HTML element allowed
html! {

    <div></div>
    <p></p>

};

有効

use yew::html;

// fixed: using HTML fragments
html! {
    <>
        <div></div>
        <p></p>
    </>
};

詳細な HTMLで Yew と HTML をさらに詳しく紹介します。