当前位置：首页 > 网络编程 > ASP.NET > Blazor RenderFragment 用法教程 > 正文

Blazor RenderFragment 用法教程

来源：这里教程网 时间：2026-02-21 17:38:07 作者：

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。它接收一个类型参数，在调用时把当前数据对象传进去。

子组件（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 当变量传”的自然延伸，不复杂但容易忽略细节。

编辑推荐：

相关推荐

最新软件资讯

Win10显示器颜色应该如何调整？Win10调整显示器颜色的方法
Win10显示器颜色应该如何调整？Win10调整显示器颜色的方法

热文推荐

天极热推