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

煙雲 2025-12-30 00:00:00 次阅读

@ref是Blazor中获取DOM元素引用的直接方式，仅适用于组件内静态HTML元素，需在OnAfterRenderAsync中使用并配合JS Interop操作，不支持条件渲染。

在 Blazor 中，@ref 是获取 DOM 元素引用的最直接方式，但它只适用于组件内定义的 HTML 元素（如、 等），不能用于动态渲染的内容或跨组件访问。

`基本用法：用 @ref 绑定到元素`


在 Razor 文件中，给任意 HTML 标签添加 @ref 属性，并指向一个同类型（如 ElementReference）的字段即可：

声明字段：@code { private ElementReference myDiv; }

绑定元素：Hello

后续可在生命周期方法（如 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 元素，可直接操作

常见陷阱与替代方案
@ref 不支持条件渲染中的元素（如 @if (show) { ... }），因为引用可能为 null。应对策略包括：

检查是否为 null：if (myDiv.Id != null) { ... }

改用 @key 配合状态管理，确保元素复用逻辑可控
复杂场景建议封装为自定义组件，内部统一管理 ref 和生命周期

基本上就这些。@ref 是轻量且有效的 DOM 引用方式，关键在于理解它的生命周期约束和 JS 交互边界。