参照

refキーワードは、HTML要素またはコンポーネントの内部で、その項目がアタッチされているDOM エレメントを取得するために使用できます。これは、viewライフサイクルメソッドの外部でDOMに変更を加えるために使用できます。

これは、canvasエレメントの制御を取得したり、ページの異なるセクションにスクロールしたりする場合に役立ちます。たとえば、コンポーネントのrenderedメソッドでNodeRefを使用すると、viewからレンダリングされた後に、canvasエレメントに対する描画呼び出しを行うことができます。

構文は次のとおりです:

use web_sys::Element;
use yew::{html, Component, Context, Html, NodeRef};

struct Comp {
    node_ref: NodeRef,
}

impl Component for Comp {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {
            node_ref: NodeRef::default(),
        }
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <div ref={self.node_ref.clone()}></div>
        }
    }

    fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
        let has_attributes = self.node_ref
            .cast::<Element>()
            .unwrap()
            .has_attributes();
    }
}

関連する例

• Node参照