Blazor @ref 变量获取 DOM 元素引用的方法

来源：这里教程网时间：2026-02-21 17:36:09 作者：

在 Blazor 中，

@ref

是获取 DOM 元素引用的最直接方式，但它只适用于组件内定义的 HTML 元素（如

<input>

、

<div> 等），不能用于动态渲染的内容或跨组件访问。<h3>基本用法：用 @ref 绑定到元素</h3>
<p>在 Razor 文件中，给任意 HTML 标签添加 <code>@ref

属性，并指向一个同类型（如

ElementReference

）的字段即可：

声明字段：
@code { private ElementReference myDiv; }
绑定元素：
<div>Hello</div>
后续可在生命周期方法（如
OnAfterRenderAsync
）或事件处理中使用它

注意时机：DOM 渲染完成后再访问

@ref

赋值发生在组件首次渲染后，因此不能在

OnInitialized

或

OnParametersSet

中立即操作 DOM。推荐做法是：

在
OnAfterRenderAsync
中加判断：
if (!hasLoaded) { await JS.InvokeVoidAsync("focusElement", myDiv); hasLoaded = true; }
或用
StateHasChanged()
触发重绘后再次确认引用是否就绪

配合 JavaScript 交互：调用原生 DOM 方法

Blazor 不允许直接调用 DOM API，需通过 JS Interop 将

ElementReference

传给 JS 函数：

C# 中：
await JS.InvokeVoidAsync("doSomethingWithElement", myDiv);
JS 中：
window.doSomethingWithElement = (element) => { element.focus(); };
注意：
ElementReference
在 JS 中表现为真实 DOM 元素，可直接操作