@ref用于获取组件或HTML元素引用，支持调用方法、聚焦等操作；需在OnAfterRender后使用，不可在OnInitialized中访问；配合JS Interop可操作DOM；动态列表应结合@key与字典存储引用。
在 Blazor 中，@ref 用于获取对已渲染组件实例或 HTML 元素的引用，方便在 C# 代码中直接操作（比如调用组件方法、聚焦输入框、读取 DOM 属性等）。它不是 JavaScript 的 ref，而是 Blazor 的“组件/元素引用机制”，需注意生命周期和使用时机。
引用自定义组件（如 MyButton.razor）
给组件标签加 @ref，绑定一个匹配类型的字段或属性即可。Blazor 会在组件完成首次渲染后自动赋值。
示例：
<MyButton @ref="myButton" OnClick="HandleClick" />
<p>@code {
private MyButton myButton; // 类型必须和组件一致</p><pre class="brush:php;toolbar:false;">private void HandleClick()
{
myButton?.ShowSuccess(); // 调用组件公开的方法
}}
⚠️ 注意：该字段在组件初始化（OnInitialized）时仍为 null，必须等到 OnAfterRender 或用户交互触发后才可用；若需立即操作，可结合 StateHasChanged() + 条件判断。
引用原生 HTML 元素（如 input、div）
Blazor 不允许直接操作 DOM，但可通过 @ref 获取 ElementReference，再配合 JS Interop 实现聚焦、滚动、获取尺寸等操作。
示例（自动聚焦输入框）：
<input @ref="textInput" type="text" />
<button @onclick="FocusInput">聚焦</button>
<p>@code {
private ElementReference textInput;</p><pre class="brush:php;toolbar:false;">private async Task FocusInput()
{
await JSRuntime.InvokeVoidAsync("focusElement", textInput);
}}
对应 JS（在 wwwroot/js/site.js 中）：
window.focusElement = (element) => element.focus();
✅ 常见用途：聚焦、scrollIntoView、读取 clientWidth、监听原生事件（需搭配 JS Interop）。
@ref 的关键注意事项
-
只在首次渲染后生效：
@ref绑定的变量在OnInitialized和OnParametersSet中仍是null，不要在此阶段调用 -
不支持条件渲染中的 @ref：如果组件/元素被
@if或foreach动态控制，且初始为 false，@ref可能不会更新或变为null；建议用@key配合确保引用稳定 - 避免在循环中复用同一 ref 变量：如下写法会导致所有项共用最后一个引用 —— 应改用数组或字典存多个引用
-
组件必须有 public 无参构造函数，否则
@ref无法实例化（一般默认满足）
替代方案：使用 @key + 状态管理更稳妥
当需要精确控制引用生命周期（例如列表项动态增删），推荐结合 @key 和状态集合：
@foreach (var item in items)
{
<MyItem @key="item.Id" @ref="refs[item.Id]" Data="item" />
}
<p>@code {
private Dictionary<Guid, MyItem> refs = new();
private List<ItemModel> items = new();
}这样每个组件都有独立引用，增删时 Blazor 能正确复用或销毁对应实例。
基本上就这些。@ref 是 Blazor 实现细粒度交互的基础能力，用对时机、避开常见坑，就能自然衔接组件逻辑与底层 DOM 操作。
