参考号

Markup 模板将为您处理所有 DOM 元素渲染，但如果您确实需要访问模板渲染的元素，则可以使用 ref 属性提供一个句柄键，然后可以使用该句柄键来获取元素。

javascript
html`<button ref="btn">click me</button>`

多重参考

ref 属性始终返回一个数组。因此，您可以使用同一把钥匙一次抓取多个物品。

javascript
const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

在呈现模板之前不会创建引用。这是因为创建模板只是注册一个模板，并在渲染阶段收集元素。

访问参考文献

要访问这些参考元素，您可以读取模板实例中的 refs 属性。

javascript
const temp = html`
    <li ref="item">item 1</li>
    <li ref="item">item 2</li>
    <li ref="item">item 3</li>
`.render(document.body)

console.log(
    temp.refs['item'] // (3) [li, li, li]
)

refs 属性返回一个对象文字，其中包含由您在 ref 属性中提供的值键入的元素数组。

嵌套引用

您可以通过模板实例（包括其子模板）访问任何引用。

javascript
const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

此功能使您可以专注于顶级模板并从那里开始处理所有事情。这并不意味着您无法访问每个单独模板级别的参考。只是更方便而已。

javascript
items[0].refs['item'] // [li]
temp.refs['list'] // [ul]
temp.refs['item'] // [li, li, li]

动态参考

所有引用都是动态的，这意味着当事物从模板中渲染或卸载时，引用会被添加或删除。

javascript
const items = [
    html`<li ref="item">Buy groceries</li>`,
    html`<li ref="item">Go to gym</li>`,
    html`<li ref="item">Write a blog</li>`,
]

const temp = html`
    <ul ref="list">
        ${items}
    </ul>
`.render(document.body)

console.log(
    temp.refs // {item: Array(3), list: Array(1)}
)

items[0].unmount()
items[2].unmount()

console.log(
    temp.refs // {item: Array(1), list: Array(1)}
)

因此，在执行任何操作之前，您应该始终检查参考是否存在。这将指示该元素是否仍在模板中呈现。

<< 属性活动 >>
编辑本文档