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