Blazor 怎么使用 @ref 引用组件或元素-C#.Net教程-PHP中文网

Blazor 怎么使用 @ref 引用组件或元素

煙雲

发布： 2025-12-22 08:55:02

原创

619人浏览过

@ref用于获取组件或HTML元素引用，支持调用方法、聚焦等操作；需在OnAfterRender后使用，不可在OnInitialized中访问；配合JS Interop可操作DOM；动态列表应结合@key与字典存储引用。

blazor 怎么使用 @ref 引用组件或元素

在 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 实现聚焦、滚动、获取尺寸等操作。

示例（自动聚焦输入框）：

letterdrop

B2B内容营销自动化平台，从创意到产生潜在客户的内容的最佳实践和工具。

查看详情

<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 操作。

以上就是Blazor 怎么使用 @ref 引用组件或元素的详细内容，更多请关注php中文网其它相关文章！