@ref是Blazor中获取DOM元素引用的直接方式，仅适用于组件内静态HTML元素，需在OnAfterRenderAsync中使用并配合JS Interop操作，不支持条件渲染。
在 Blazor 中，@ref 是获取 DOM 元素引用的最直接方式，但它只适用于组件内定义的 HTML 元素（如 <input>、<div> 等），不能用于动态渲染的内容或跨组件访问。
基本用法：用 @ref 绑定到元素
在 Razor 文件中，给任意 HTML 标签添加 @ref 属性，并指向一个同类型（如 ElementReference）的字段即可：
- 声明字段：
@code { private ElementReference myDiv; } - 绑定元素：
<div @ref="myDiv">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 元素，可直接操作
常见陷阱与替代方案
@ref 不支持条件渲染中的元素（如 @if (show) { <div @ref="target">...</div> }），因为引用可能为 null。应对策略包括：
- 检查是否为 null：
if (myDiv.Id != null) { ... } - 改用
@key配合状态管理，确保元素复用逻辑可控 - 复杂场景建议封装为自定义组件，内部统一管理 ref 和生命周期
基本上就这些。@ref 是轻量且有效的 DOM 引用方式，关键在于理解它的生命周期约束和 JS 交互边界。
