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" />
};

類似於格式表達式，有一個簡單的方法可以透過套用大括號將周圍內容的值嵌入到 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。