HTML with 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 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 使用非常相似。
- Invalid
- Valid
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。