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

Blazor 中的 RenderFragment 是构建可复用、模板化组件的核心机制,本质是一个“UI 片段委托”,它把一段 Razor 标记(含逻辑)封装成可传递、可插入的渲染单元。掌握它,就能轻松实现卡片、列表、标签页、折叠面板等常见 UI 模式。
基础用法:默认插槽(ChildContent)
最常用场景是让父组件向子组件注入任意内容。关键点有三个:参数命名必须为 ChildContent、类型为 RenderFragment?、用 @ChildContent 在子组件中渲染。
- 子组件(Card.razor)中定义:
@code {
[Parameter] public string Title { get; set; } = "标题";
[Parameter] public RenderFragment? ChildContent { get; set; }
}
- 父组件中使用时,直接在标签内写内容,Blazor 自动绑定到 ChildContent:
姓名:张三 邮箱:zhang@example.com
带数据的模板:RenderFragment
当需要把集合项的数据传进模板里渲染(比如表格每行、列表每项),就得用泛型版本 RenderFragment
m18麦考林整站 for Ecshop v2.7.3 安装方法: 1,解压rar包上传到网站根目录 2,导入sql数据库文件,到你的数据库里,可以phpmyadmin等软件 3,修改data里config.php里面的数据库 用户名 密码等信息 为你自己的数据库信息 4,安装完毕之后的后台用户名密码为: 后台地址:域名/admin 用户名:admin 密码:admin123 模板使用教程: htt
- 子组件(Table.razor)中声明:
[Parameter] public IReadOnlyList
[Parameter] public RenderFragment
;@context.Name
@context.Email
- 渲染时循环调用模板,并传入每一项:
@foreach (var person in DataSource)
{
@RowTemplate(person)
}
- 父组件可自定义模板,@context 就是当前 Person 实例:
@context.Name
@context.Email
多个命名插槽:灵活布局
一个组件可以暴露多个 RenderFragment 参数,各自命名,对应不同区域。Blazor 不限制数量,只要名字不重复、调用时显式指定即可。
- 子组件(Modal.razor)支持 Header / Body / Footer:
@code {
[Parameter] public RenderFragment? Header { get; set; }
[Parameter] public RenderFragment? Body { get; set; }
[Parameter] public RenderFragment? Footer { get; set; }
}
- 父组件中按名称提供内容:
确定要永久删除这条记录吗?
确认删除
注意事项与技巧
实际开发中容易踩坑,记住这几个关键点:
- 参数名不是必须叫 ChildContent,但只有叫这个名字时,父组件才能省略标签名直接写内容;其他名字必须显式用
... 包裹 - RenderFragment? 允许为空,使用前建议判空,或提供默认值(如
= @暂无内容) - 模板内可自由使用 @if、@foreach、@code 块,甚至嵌套其他组件 —— 它就是一段可执行的 Razor 片段
- 若需从模板内触发子组件方法(比如按钮点击调用子组件逻辑),要用 EventCallback 配合传递,不能直接访问子组件实例
基本上就这些。RenderFragment 看似抽象,用熟了就是“把 HTML 当变量传”的自然延伸,不复杂但容易忽略细节。









