メインコンテンツまでスキップ
Version: Next

要素

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 {
    // メモ化された関数、一度だけ実行されます
    let node = use_memo(
        (),
        |_| {
            // ドキュメントから div 要素を作成
            let div: Element = document().create_element("div").unwrap();
            // コンテンツ、クラスなどを追加
            div.set_inner_html("Hello, World!");
            // Element を Node に変換
            let node: Node = div.into();
            // その Node を Html 値として返す
            Html::VRef(node)
        },
    );

    // use_memo は Rc ポインタを返すので、参照解除とクローンが必要です
    (*node).clone()
}

動的なタグ名​

高階コンポーネントを構築する際、タグ名が静的ではない状況に遭遇することがあります。例えば、Title コンポーネントがあり、レベル属性に応じて 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 に設定されません。

関連例​