Blazor动态渲染组件主要用DynamicComponent和RenderFragment：前者按类型切换组件，后者按内容注入UI；配合@key可提升动态列表稳定性，并需注意组件生命周期与状态管理。
Blazor 动态渲染组件主要靠 DynamicComponent 和 RenderFragment 两种机制，分别适用于“按类型切换组件”和“按内容注入 UI”两类场景。用对方法能避免硬编码条件判断、提升可维护性，也方便做插件化或配置驱动的界面。
当你需要根据运行时数据（比如用户选择、API 返回类型名）决定显示哪个组件时，DynamicComponent 是最直接的方式。
Type（组件类型，必须是继承自 ComponentBase 的类）和 Parameters（键值对字典，用于传参）Type 对象，通常从 typeof(MyComponent) 或反射中获取[Parameter] 属性名，且类型兼容示例：
<DynamicComponent Type="@selectedComponentType" Parameters="@componentParams" />
@code {
private Type selectedComponentType = typeof(Counter);
private Dictionary<string, object> componentParams = new() {
{ "InitialCount", 100 }
};
private void SwitchToWeather() {
selectedComponentType = typeof(WeatherForecastList);
componentParams = new() { { "City", "Beijing" } };
}
}如果你不关心“是什么组件”，只关心“要渲染什么内容”，RenderFragment 更灵活。它本质是一个委托，接收 RenderTreeBuilder 并生成 DOM 结构，常用于模板化组件（如卡片、模态框、表格单元格）。
@ChildContent 或命名参数（如 HeaderContent）接收子内容示例（父组件定义）：
<div class="card">
<div class="card-header">@Title</div>
<div class="card-body">@ChildContent</div>
</div>
@code {
[Parameter] public string Title { get; set; } = "默认标题";
[Parameter] public RenderFragment? ChildContent { get; set; }
}调用处写法：
<Card Title="用户信息">
<ChildContent>
<p>姓名：@user.Name</p>
<button @onclick="EditUser">编辑</button>
</ChildContent>
</Card>当动态渲染的是集合（比如一组不同类型的卡片），又用 foreach + DynamicComponent，记得加 @key。否则 Blazor 默认按索引追踪，插入/删除会导致状态错乱（如输入框失焦、动画中断）。
@key 值必须在当前循环内唯一，推荐用数据项的 ID 或完整对象（若重写了 Equals 和 GetHashCode）正确写法：
@foreach (var item in items)
{
<DynamicComponent @key="item.Id" Type="@GetTypeForItem(item)" Parameters="@GetParams(item)" />
}动态组件每次类型变化都会被销毁重建，原有状态（如内部字段、未提交表单）不会保留。
OnInitialized 中做一次性初始化逻辑（比如订阅事件），因为组件可能反复创建；改用 OnParametersSet 或手动控制OnInitializedAsync），确保异常有兜底，防止白屏基本上就这些。核心是分清“换组件”还是“换内容”——前者用 DynamicComponent，后者用 RenderFragment，再辅以 @key 和状态设计，就能稳稳撑起复杂动态 UI。
以上就是Blazor 怎么动态渲染组件的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
915
收藏
