html.mdx

title	description	comment
HTML with html!	这是HTML，但又不完全是！	尽可能使此文件简短简单。它的目的是让读者更容易了解 Yew 中的组件，而不是提供适当的 API 文档。

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

您可以使用 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 expressions 类似，有一种简单的方法可以通过使用花括号将上下文中的值嵌入到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!提供了fragments的功能。Fragments是没有名称的标签，它们本身不产生HTML元素。

和 React 使用非常相似。

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

我们将在 more HTML 中更深入地介绍 Yew 和 HTML。