Skip to main content
Version: Next

HTML

html! 宏允许您声明性地编写 HTML 和 SVG 代码。它类似于 JSX（一种允许您在 JavaScript 中编写类似 HTML 的代码的扩展）。

重要提示

  1. html! {} 宏只能接受一个根 HTML 节点（您可以通过使用 fragments 或 iterators 来规避这一点）
  2. 空的 html! {} 调用是有效的，不会渲染任何内容
  3. 字面量必须始终用引号引起来并用大括号括起来：html! { <p>{ "Hello, World" }</p> }
  4. html! 宏会将所有标签名称转换为小写。要使用大写字符（某些 SVG 元素所需的字符）请使用动态标签名称：html! { <@{"myTag"}></@> }
备注

html! 宏可能会达到编译器的默认递归限制。如果遇到编译错误，请在 crate 根目录添加类似 #![recursion_limit="1024"] 的属性以解决问题。

标签 (Tags) 结构​

标签 (Tags) 基于 HTML 标签。组件、元素和列表都基于此标签语法。

标签必须要么自闭合 <... />，要么对于每个开始标签都有一个相应的结束标签。

use yew::prelude::*;

html! {
  <div id="my_div"></div>
};
use yew::prelude::*;

html! {
  <input id="my_input" />
};
提示

方便起见，通常需要闭合标签的元素允许自闭合。例如，编写 html! { <div class="placeholder" /> } 是有效的。

创建复杂的嵌套 HTML 和 SVG 布局还是很容易的：

use yew::prelude::*;

html! {
    <div>
        <div data-key="abc"></div>
        <div class="parent">
            <span class="child" value="anything"></span>
            <label for="first-name">{ "First Name" }</label>
            <input type="text" id="first-name" value="placeholder" />
            <input type="checkbox" checked=true />
            <textarea value="write a story" />
            <select name="status">
                <option selected=true disabled=false value="">{ "Selected" }</option>
                <option selected=false disabled=true value="">{ "Unselected" }</option>
            </select>
        </div>
    </div>
};

Lints​

如果您使用 Rust 编译器的开发者版本编译 Yew，宏将警告您可能遇到的一些常见陷阱。当然，您可能需要使用稳定版编译器（例如，您的组织可能有政策要求这样做）进行发布构建，但即使您使用的是稳定工具链，运行 cargo +nightly check 也可能会标记一些可以改进 HTML 代码的方法。

目前，这些 lint 主要与可访问性相关。如果您有 lint 的想法，请随时在此问题中发表意见。

指定属性和属性​

属性与普通 HTML 中的元素设置方式相同：

use yew::prelude::*;

let value = "something";
html! { <div attribute={value} /> };

属性在元素名称之前用 ~ 指定：

use yew::prelude::*;

html! { <my-element ~property="abc" /> };
提示

如果值是一个字面量的话，围绕值的大括号可以省略。

什么是字面量

字面量是 Rust 中所有有效的字面量表达式。请注意，负数不是字面量，因此必须用大括号括起来 {-6}。

组件属性

组件属性作为 Rust 对象传递，与此处描述的元素参数 (Attributes) / 属性 (Properties) 不同。 在组件属性中了解更多信息。

特殊属性​

有一些特殊属性不直接影响 DOM，而是作为 Yew 虚拟 DOM 的指令。目前有两个这样的特殊属性：ref 和 key。

ref 允许您直接访问和操作底层 DOM 节点。有关更多详细信息，请参阅Refs。

另一方面，key 为元素提供了一个唯一标识符，Yew 可以用于优化目的。

信息

了解更多相关内容

条件渲染​

可以通过使用 Rust 的条件结构来条件性地渲染标记。目前只支持 if 和 if let。

use yew::prelude::*;

html! {
  if true {
      <p>{ "True case" }</p>
  }
};
信息

阅读条件渲染一节了解更多