元素

DOM 节点

在 Yew 中手动创建或管理 DOM 节点的原因有很多，例如与可能导致与受管组件冲突的 JS 库集成时。

使用 web-sys，您可以创建 DOM 元素并将其转换为 Node - 然后可以使用 VRef 将其用作 Html 值

use web_sys::{Element, Node};
use yew::prelude::*;
use gloo::utils::document;

#[function_component]
fn MyComponent() -> Html {
    // memoize as this only needs to be executed once
    let node = use_memo(
        (),
        |_| {
            // Create a div element from the document
            let div: Element = document().create_element("div").unwrap();
            // Add content, classes etc.
            div.set_inner_html("Hello, World!");
            // Convert Element into a Node
            let node: Node = div.into();
            // Return that Node as a Html value
            Html::VRef(node)
        },
    );

    // use_memo return Rc so we need to deref and clone
    (*node).clone()
}

动态标签名称

在构建高阶组件时，你可能会遇到元素的标签名称不是静态的情况。例如，你可能有一个 Title 组件，它可以根据 level 属性呈现从 h1 到 h6 的任何内容。Yew 允许你使用 @{name} 动态设置标签名称，其中 name 可以是返回字符串的任何表达式，而无需使用大型匹配表达式。

use yew::prelude::*;

let level = 5;
let text = "Hello World!".to_owned();

html! {
    <@{format!("h{}", level)} class="title">{ text }</@>
};

布尔属性

某些内容属性（例如 checked、hidden、required）称为布尔属性。在 Yew 中，布尔属性需要设置为布尔值

use yew::prelude::*;

html! {
    <div hidden=true>
        { "This div is hidden." }
    </div>
};

这将生成在功能上等效于此的 HTML

<div hidden>This div is hidden.</div>

将布尔属性设置为 false 等效于根本不使用该属性；可以使用布尔表达式的值

use yew::prelude::*;

let no = 1 + 1 != 2;

html! {
    <div hidden={no}>
        { "This div is NOT hidden." }
    </div>
};

这将生成以下 HTML

<div>This div is NOT hidden.</div>

字符串类属性

但除了少数布尔属性外，你可能还会处理大量字符串类 HTML 属性，而 Yew 有几个选项可以将字符串类值传递给组件。

use yew::{html, virtual_dom::AttrValue};

let str_placeholder = "I'm a str!";
let string_placeholder = String::from("I'm a String!");
let attrvalue_placeholder = AttrValue::from("I'm an AttrValue!");

html! {
    <div>
        <input placeholder={str_placeholder} />
        <input placeholder={string_placeholder} />
        <input placeholder={attrvalue_placeholder} />
    </div>
};

它们都有效，但我们鼓励你优先使用 Yew 的自定义 AttrValue，特别是如果你需要克隆或将它们作为属性传递给另一个组件时。

HTML 元素的可选属性

大多数 HTML 属性可以使用可选值（Some(x) 或 None）。如果属性被标记为可选，这允许我们省略该属性。

use yew::prelude::*;

let maybe_id = Some("foobar");

html! {
    <div id={maybe_id}></div>
};

如果属性设置为 None，则不会在 DOM 中设置该属性。

相关示例

• 内部 HTML