Blazor如何实现组件模板化开发

Blazor模板化组件核心是RenderFragment和RenderFragment<T>参数，前者用于静态内容（如Header），后者用于数据驱动场景（如RowTemplate<User>），支持@context或自定义上下文变量，可组合多模板构建高复用组件，并需注意延迟执行、状态传递和事件解耦等细节。

Blazor 使用模板化组件的核心是 RenderFragment 和 RenderFragment<T> 类型的参数。它们让父组件能把任意 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> 实现数据驱动模板

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

• 声明泛型模板参数：[Parameter] public RenderFragment<User> RowTemplate { get; set; }
• 在组件内部遍历数据并调用模板：@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>、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> 参数把回调传进来，保持解耦
• 调试时可在模板里加 @if (true) { <div>DEBUG</div> } 快速确认是否进入渲染流程

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