要素

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()
}

動的なタグ名

高階コンポーネントを作成すると、要素のタグ名が静的でない状況に遭遇することがあります。たとえば、レベルプロップに応じてh1からh6まで何でもレンダリングできるTitleコンポーネントがある場合があります。大きなマッチ式を使用する代わりに、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では、ブール属性をbool値に設定する必要があります。

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