Blazor 怎么使用模板化组件

来源:这里教程网 时间:2026-02-21 17:33:04 作者:

Blazor 使用模板化组件的核心是 RenderFragmentRenderFragment 类型的参数。它们让父组件能把任意 Razor 标记“传进去”,由子组件决定在哪儿、怎么渲染——不是传字符串,而是传可执行的 UI 片段。

用 RenderFragment 实现静态内容模板

适合标题、页脚、操作栏这类不依赖数据项的区域。

在子组件中声明参数:
[Parameter] public RenderFragment Header { get; set; }
在组件标记里用
@Header
插入位置,比如:
<div class="card-header">@Header</div>
调用时直接写标签内容:
<card><header>用户列表</header></card>
也可以嵌入 Razor 表达式:
<header>共 @items.Count() 条记录</header>

用 RenderFragment 实现数据驱动模板

适合表格行、列表项等需要逐条绑定数据的场景,T 就是每项的数据类型。

声明泛型模板参数:
[Parameter] public RenderFragment<user> RowTemplate { get; set; }</user>
在组件内部遍历数据并调用模板:
@foreach (var user in Users) { @RowTemplate(user) }
调用时用
@context
接收传入项:
<rowtemplate><tr>
<td>@context.Name</td>
<td>@context.Email</td>
</tr></rowtemplate>
也可改用自定义变量名:
<rowtemplate context="u"><td>@u.Name</td></rowtemplate>

组合多个模板做高复用组件

比如一个通用表格组件,可以同时支持头、体、尾三段模板。

定义三个参数:
HeaderTemplate
RowTemplate<t></t>
FooterTemplate
结构上保持语义清晰:
<thead>@HeaderTemplate</thead>
<tbody>@*循环调用 RowTemplate*@</tbody>
<tfoot>@FooterTemplate</tfoot>
调用时自由组合:
<mytable items="users"><headertemplate><th>姓名</th>
<th>邮箱</th></headertemplate><rowtemplate><tr>
<td>@context.Name</td>
<td>@context.Email</td>
</tr></rowtemplate></mytable>

注意几个关键细节

避免常见坑点,让模板真正可控可用。

RenderFragment 是延迟执行的——它只在被
@
调用时才渲染,不会提前求值
模板内访问父组件状态需显式传参或用
CascadingParameter
,不能直接读父级
@code
块里的字段
如果模板里要触发事件(如点击某行),建议通过
EventCallback<t></t>
参数把回调传进来,保持解耦
调试时可在模板里加
@if (true) { <div>DEBUG</div> }
快速确认是否进入渲染流程

基本上就这些。模板化组件不复杂但容易忽略泛型参数和上下文绑定逻辑,写熟了能大幅减少重复 UI 代码。

相关推荐