跳至主要内容
版本：0.21

HTML

html! 宏允许你以声明的方式编写 HTML 和 SVG 代码。它类似于 JSX（JavaScript 的一个扩展，允许你在 JavaScript 中编写类似 HTML 的代码）。

重要说明

  1. html! 宏只接受一个根 html 节点（你可以通过使用 片段 或 迭代器 来解决这个问题）
  2. 一个空的 html! {} 调用是有效的，并且不会渲染任何内容
  3. 文本必须始终用引号引起来并用大括号括起来：html! { <p>{ "Hello, World" }</p> }
  4. html! 宏会将所有标签名称变为小写。要使用大写字符（某些 SVG 元素需要），请使用 动态标签名称：html! { <@{"myTag"}></@> }
注意

html! 宏可以达到编译器的默认递归限制。如果你遇到编译错误，请在 crate 根部添加一个属性，如 #![recursion_limit="1024"]，以解决这个问题。

标签结构​

标签基于 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 代码的方法。

目前，lints 主要与可访问性相关。如果您有关于 lints 的想法，请随时 参与此问题。

指定属性和特性​

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

use yew::prelude::*;

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

特性使用元素名称之前的 ~ 指定

use yew::prelude::*;

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

如果值是文本，则可以省略值周围的大括号。

什么归类为文本

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

组件属性

组件属性作为 Rust 对象传递，与此处描述的元素属性/属性不同。在 组件属性 中阅读更多相关信息

特殊属性​

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

ref 允许你直接访问和操作底层 DOM 节点。有关更多详细信息，请参见 引用。

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

信息

在 列表 中阅读更多相关信息

条件渲染​

可以通过使用 Rust 的条件结构有条件地渲染标记。' + '目前仅支持 if 和 if let。

use yew::prelude::*;

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

在 条件渲染 中阅读更多相关信息