mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
31 lines
868 B
Markdown
31 lines
868 B
Markdown
---
|
|
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
|
|
// In create
|
|
self.node_ref = NodeRef::default();
|
|
|
|
// In view
|
|
html! {
|
|
<div ref=self.node_ref.clone()></div>
|
|
}
|
|
|
|
// In rendered
|
|
let has_attributes = self.node_ref.cast::<Element>().unwrap().has_attributes();
|
|
```
|
|
|
|
## Relevant examples
|
|
- [Node Refs](https://github.com/yewstack/yew/tree/master/examples/node_refs)
|