在 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();
}</itemmodel></p>这样每个组件都有独立引用，增删时 Blazor 能正确复用或销毁对应实例。
基本上就这些。@ref 是 Blazor 实现细粒度交互的基础能力，用对时机、避开常见坑，就能自然衔接组件逻辑与底层 DOM 操作。
