0

0

Blazor 怎么使用模板化组件

畫卷琴夢

畫卷琴夢

发布时间:2025-12-12 16:36:07

|

808人浏览过

|

来源于php中文网

原创

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

blazor 怎么使用模板化组件

Blazor 使用模板化组件的核心是 RenderFragmentRenderFragment<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>

组合多个模板做高复用组件

比如一个通用表格组件,可以同时支持头、体、尾三段模板。

Yodayo
Yodayo

一个专为动漫迷和vTuber打造的AI艺术创作平台、交流社区

下载
  • 定义三个参数:HeaderTemplateRowTemplate<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 代码。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

338

2023.10.31

php数据类型
php数据类型

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

225

2025.10.31

c语言 数据类型
c语言 数据类型

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

138

2026.02.12

if什么意思
if什么意思

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

847

2023.08.22

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

203

2023.11.20

php中foreach用法
php中foreach用法

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

267

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
10分钟--Midjourney创作自己的漫画
10分钟--Midjourney创作自己的漫画

共1课时 | 0.1万人学习

Midjourney 关键词系列整合
Midjourney 关键词系列整合

共13课时 | 0.9万人学习

AI绘画教程
AI绘画教程

共2课时 | 0.2万人学习

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

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