mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
3ad4dbe837
* add prettier * ci * run prettier * run prettier in CI * run prettier --write * ignore README.md * specify googleAnalytics * fmt * npm run write-translations * fmt * ignore i18n json files they're autogenerated and don't like being formatted * post merge fixes & some updates * post merge fixes
56 lines
1.4 KiB
Plaintext
56 lines
1.4 KiB
Plaintext
---
|
|
title: 'Refs'
|
|
description: 'Out-of-band DOM access'
|
|
---
|
|
|
|
The `ref` keyword can be used inside of any HTML element or component to get the DOM `Element` that
|
|
the item is attached to. This can be used to make changes to the DOM outside of the `view` lifecycle
|
|
method.
|
|
|
|
This is useful for getting ahold of canvas elements, or scrolling to different sections of a page.
|
|
For example, using a `NodeRef` in a component's `rendered` method allows you to make draw calls to
|
|
a canvas element after it has been rendered from `view`.
|
|
|
|
The syntax is:
|
|
|
|
```rust
|
|
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 {
|
|
// highlight-next-line
|
|
node_ref: NodeRef::default(),
|
|
}
|
|
}
|
|
|
|
fn view(&self, _ctx: &Context<Self>) -> Html {
|
|
html! {
|
|
// highlight-next-line
|
|
<div ref={self.node_ref.clone()}></div>
|
|
}
|
|
}
|
|
|
|
fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
|
|
// highlight-start
|
|
let has_attributes = self.node_ref
|
|
.cast::<Element>()
|
|
.unwrap()
|
|
.has_attributes();
|
|
// highlight-end
|
|
}
|
|
}
|
|
```
|
|
|
|
## Relevant examples
|
|
|
|
- [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)
|