Blazor 动态渲染组件主要靠 DynamicComponent 和 RenderFragment 两种机制，分别适用于“按类型切换组件”和“按内容注入 UI”两类场景。用对方法能避免硬编码条件判断、提升可维护性，也方便做插件化或配置驱动的界面。
用 DynamicComponent 按需加载组件
当你需要根据运行时数据（比如用户选择、API 返回类型名）决定显示哪个组件时，
DynamicComponent是最直接的方式。 它接受两个必需参数：
Type（组件类型，必须是继承自
ComponentBase的类）和
Parameters（键值对字典，用于传参） 组件类型不能是字符串，得是编译期已知的
Type对象，通常从
typeof(MyComponent)或反射中获取 参数字典中的 key 必须严格匹配目标组件的
[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 注入任意 UI 片段
如果你不关心“是什么组件”，只关心“要渲染什么内容”，
RenderFragment更灵活。它本质是一个委托，接收
RenderTreeBuilder并生成 DOM 结构，常用于模板化组件（如卡片、模态框、表格单元格）。 父组件通过
@ChildContent或命名参数（如
HeaderContent）接收子内容 子内容可以包含 HTML、绑定表达式、事件处理器，甚至嵌套其他组件 适合封装布局容器，把结构逻辑留在父组件，展示逻辑交给使用者
示例（父组件定义）：
<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>
配合 @key 提升动态列表稳定性
当动态渲染的是集合（比如一组不同类型的卡片），又用
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。
