@ref是Blazor中获取DOM元素引用的直接方式，仅适用于组件内静态HTML元素，需在OnAfterRenderAsync中使用并配合JS Interop操作，不支持条件渲染。
在 Blazor 中， 在 Razor 文件中，给任意 HTML 标签添加 Blazor 不允许直接调用 DOM API，需通过 JS Interop 将 基本上就这些。@ref 是轻量且有效的 DOM 引用方式，关键在于理解它的生命周期约束和 JS 交互边界。@ref 是获取 DOM 元素引用的最直接方式，但它只适用于组件内定义的 HTML 元素（如 、基本用法：用 @ref 绑定到元素
@ref 属性，并指向一个同类型（如 ElementReference）的字段即可：
@code { private ElementReference myDiv; }
OnAfterRenderAsync）或事件处理中使用它注意时机：DOM 渲染完成后再访问
@ref 赋值发生在组件首次渲染后，因此不能在 OnInitialized 或 OnParametersSet 中立即操作 DOM。推荐做法是：
OnAfterRenderAsync 中加判断：if (!hasLoaded) { await JS.InvokeVoidAsync("focusElement", myDiv); hasLoaded = true; }
StateHasChanged() 触发重绘后再次确认引用是否就绪配合 JavaScript 交互：调用原生 DOM 方法
ElementReference 传给 JS 函数：
await JS.InvokeVoidAsync("doSomethingWithElement", myDiv);
window.doSomethingWithElement = (element) => { element.focus(); };
ElementReference 在 JS 中表现为真实 DOM 元素，可直接操作常见陷阱与替代方案
@ref 不支持条件渲染中的元素（如 @if (show) { ），因为引用可能为 null。应对策略包括：
if (myDiv.Id != null) { ... }
@key 配合状态管理，确保元素复用逻辑可控
