0

0

C# Blazor模板化组件方法 C#如何创建可重用的布局和组件模板

星降

星降

发布时间:2026-02-10 08:48:10

|

895人浏览过

|

来源于php中文网

原创

Blazor模板化组件核心是RenderFragment参数,通过传递UI片段实现模板功能;RenderFragment用于无上下文模板,RenderFragment用于带数据上下文的模板,需显式声明多个命名参数并用@key或函数封装避免状态丢失。

c# blazor模板化组件方法 c#如何创建可重用的布局和组件模板

Blazor模板化组件的核心是 RenderFragment 参数

Blazor 中实现“模板化”的本质,不是靠继承或泛型约束,而是把 UI 片段作为参数传入组件——这个参数类型必须是 RenderFragmentRenderFragment。它代表一段可被 Blazor 渲染引擎执行的 UI 逻辑,类似 React 的 children 或 Vue 的 slot。

常见错误是试图用 stringMarkupString 拼 HTML:这无法响应式更新,也不支持事件绑定和组件嵌套。真正可重用的模板必须由框架参与渲染。

  • RenderFragment 用于无上下文的模板(如页脚、卡片主体)
  • RenderFragment 用于带数据上下文的模板(如表格行、列表项),T 是每项的数据类型
  • 组件中需用 @ChildContent 或自定义参数名(如 @HeaderTemplate)接收,并在 @ 块中直接渲染:@HeaderTemplate

如何定义一个带多个命名模板的布局组件

比如一个 DashboardCard.razor,需要支持自定义标题、内容、操作栏,且各区域独立作用域。不能只依赖 ChildContent,得显式声明多个 RenderFragment 参数。

关键点在于:参数名要语义清晰,且在组件内部用 @if (HeaderTemplate != null) 判断是否提供,避免空模板报错;同时注意参数默认值只能是 null,不能设空委托。

  • @code 块中声明:[Parameter] public RenderFragment? HeaderTemplate { get; set; }
  • 在 Razor 标记中调用:
    @HeaderTemplate
  • 使用时通过 ... 块传入,Blazor 会自动绑定到同名参数
  • 若需传递数据(如当前 item),必须用 RenderFragment,并在调用处用 @context@item 访问

为什么 RenderFragment 在循环中容易丢失状态

@foreachfor 中直接写 @item.Name,看似正常,但一旦列表重排或局部更新,Blazor 可能复用旧的 RenderFragment 实例,导致绑定错乱或事件失效——这不是 Bug,而是 RenderFragment 本身不携带 key 信息。

MVM mall 网上购物系统
MVM mall 网上购物系统

采用 php+mysql 数据库方式运行的强大网上商店系统,执行效率高速度快,支持多语言,模板和代码分离,轻松创建属于自己的个性化用户界面 v3.5更新: 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压

下载

正确做法是:给每个模板实例显式绑定唯一上下文,尤其在 RenderFragment 场景下:

  • @key 包裹外层组件:...
  • 避免在循环体内直接内联 RenderFragment,改用函数封装:@(new RenderFragment(item => __builder => { ... }))
  • 更稳妥的是把模板提取为独立组件(如 ItemDisplay.razor),由框架管理生命周期

模板化组件与 CSS 隔离、JS 互操作的兼容性要点

使用 RenderFragment 不影响 CSS 隔离(componentName.razor.css 仍作用于宿主组件),但子内容里的元素不会自动带上 scoped 属性。如果模板内容需要样式控制,得靠 CSS 类名约定或全局样式。

JS 互操作方面,RenderFragment 内部的 DOM 节点在首次渲染后才存在,所以 IJSRuntime.InvokeVoidAsync 必须在 OnAfterRenderAsync 中触发,且需用 firstRender 标志防重复调用。

  • 不要在 OnInitializedOnParametersSet 中尝试访问模板生成的 DOM
  • 若模板含第三方 JS 组件(如 Chart.js),务必在 OnAfterRenderAsync 中检查容器是否存在且非空
  • 使用 @ref 获取模板容器元素时,类型应为 ElementReference,而非 HtmlElement
实际项目中最容易被忽略的,是模板参数的生命周期与父组件状态更新的耦合关系——RenderFragment 不是静态快照,它每次渲染都会重新执行,所以闭包捕获的变量可能已过期。别在模板里直接读取未标记 [Parameter] 的字段,除非你明确知道它的更新时机。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

311

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

222

2025.10.31

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

668

2023.08.02

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

243

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

664

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

803

2023.08.22

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

161

2025.12.04

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

140

2025.07.29

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

50

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C# 教程
C# 教程

共94课时 | 9万人学习

C 教程
C 教程

共75课时 | 4.6万人学习

C++教程
C++教程

共115课时 | 16.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号