RenderFragment 是 Blazor 中封装可复用 UI 片段的核心委托类型，支持默认插槽（ChildContent）、泛型模板（RenderFragment）和多命名插槽三种用法，需注意参数命名、空值处理及事件回调配合。

Blazor 中的 RenderFragment 是构建可复用、模板化组件的核心机制，本质是一个“UI 片段委托”，它把一段 Razor 标记（含逻辑）封装成可传递、可插入的渲染单元。掌握它，就能轻松实现卡片、列表、标签页、折叠面板等常见 UI 模式。

基础用法：默认插槽（ChildContent）

最常用场景是让父组件向子组件注入任意内容。关键点有三个：参数命名必须为 ChildContent、类型为 RenderFragment?、用 @ChildContent 在子组件中渲染。

• 子组件（Card.razor）中定义：

  

@Title

  

@ChildContent

@code {
  [Parameter] public string Title { get; set; } = "标题";
  [Parameter] public RenderFragment? ChildContent { get; set; }
}

• 父组件中使用时，直接在标签内写内容，Blazor 自动绑定到 ChildContent：

  

姓名：张三

  

邮箱：zhang@example.com

带数据的模板：RenderFragment

当需要把集合项的数据传进模板里渲染（比如表格每行、列表每项），就得用泛型版本 RenderFragment。它接收一个类型参数，在调用时把当前数据对象传进去。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 子组件（Table.razor）中声明：

[Parameter] public IReadOnlyList DataSource { get; set; } = new List();
[Parameter] public RenderFragment RowTemplate { get; set; } = @ @context.Name @context.Email ;

• 渲染时循环调用模板，并传入每一项：

@foreach (var person in DataSource)
{
  @RowTemplate(person)
}

• 父组件可自定义模板，@context 就是当前 Person 实例：

  
    
      
      
    
  

@context.Name

@context.Email

多个命名插槽：灵活布局

一个组件可以暴露多个 RenderFragment 参数，各自命名，对应不同区域。Blazor 不限制数量，只要名字不重复、调用时显式指定即可。

• 子组件（Modal.razor）支持 Header / Body / Footer：

  

@Header

  

@Body

  

@Footer

@code {
  [Parameter] public RenderFragment? Header { get; set; }
  [Parameter] public RenderFragment? Body { get; set; }
  [Parameter] public RenderFragment? Footer { get; set; }
}

• 父组件中按名称提供内容：

  

确认删除

  

确定要永久删除这条记录吗？

  

    取消
    删除
  

注意事项与技巧

实际开发中容易踩坑，记住这几个关键点：

• 参数名不是必须叫 ChildContent，但只有叫这个名字时，父组件才能省略标签名直接写内容；其他名字必须显式用 ... 包裹
• RenderFragment? 允许为空，使用前建议判空，或提供默认值（如 = @<span>暂无内容</span>）
• 模板内可自由使用 @if、@foreach、@code 块，甚至嵌套其他组件 —— 它就是一段可执行的 Razor 片段
• 若需从模板内触发子组件方法（比如按钮点击调用子组件逻辑），要用 EventCallback 配合传递，不能直接访问子组件实例

基本上就这些。RenderFragment 看似抽象，用熟了就是“把 HTML 当变量传”的自然延伸，不复杂但容易忽略细节。