Blazor 怎么动态渲染组件

Blazor动态渲染组件主要用DynamicComponent和RenderFragment：前者按类型切换组件，后者按内容注入UI；配合@key可提升动态列表稳定性，并需注意组件生命周期与状态管理。

Blazor 动态渲染组件主要靠 DynamicComponent 和 RenderFragment 两种机制，分别适用于“按类型切换组件”和“按内容注入 UI”两类场景。用对方法能避免硬编码条件判断、提升可维护性，也方便做插件化或配置驱动的界面。

用 DynamicComponent 按需加载组件

当你需要根据运行时数据（比如用户选择、API 返回类型名）决定显示哪个组件时，DynamicComponent 是最直接的方式。

• 它接受两个必需参数：Type（组件类型，必须是继承自 ComponentBase 的类）和 Parameters（键值对字典，用于传参）
• 组件类型不能是字符串，得是编译期已知的 Type 对象，通常从 typeof(MyComponent) 或反射中获取
• 参数字典中的 key 必须严格匹配目标组件的 [Parameter] 属性名，且类型兼容

示例：

@code {
    private Type selectedComponentType = typeof(Counter);
    private Dictionary componentParams = new() {
        { "InitialCount", 100 }
    };

    private void SwitchToWeather() {
        selectedComponentType = typeof(WeatherForecastList);
        componentParams = new() { { "City", "Beijing" } };
    }
}

用 RenderFragment 注入任意 UI 片段

如果你不关心“是什么组件”，只关心“要渲染什么内容”，RenderFragment 更灵活。它本质是一个委托，接收 RenderTreeBuilder 并生成 DOM 结构，常用于模板化组件（如卡片、模态框、表格单元格）。

• 父组件通过 @ChildContent 或命名参数（如 HeaderContent）接收子内容
• 子内容可以包含 HTML、绑定表达式、事件处理器，甚至嵌套其他组件
• 适合封装布局容器，把结构逻辑留在父组件，展示逻辑交给使用者

示例（父组件定义）：

  
@Title
  
@ChildContent

@code {
    [Parameter] public string Title { get; set; } = "默认标题";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

调用处写法：

Elser AI Comics

一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏

下载

  
    
姓名：@user.Name
    编辑
  

配合 @key 提升动态列表稳定性

当动态渲染的是集合（比如一组不同类型的卡片），又用 foreach + DynamicComponent，记得加 @key。否则 Blazor 默认按索引追踪，插入/删除会导致状态错乱（如输入框失焦、动画中断）。

• @key 值必须在当前循环内唯一，推荐用数据项的 ID 或完整对象（若重写了 Equals 和 GetHashCode）
• 不要用随机数或临时变量，否则每次渲染都变，等于强制重绘

正确写法：

@foreach (var item in items)
{
    
}

注意组件生命周期与状态管理

动态组件每次类型变化都会被销毁重建，原有状态（如内部字段、未提交表单）不会保留。

• 如需跨切换保持状态，把关键数据提到父组件或服务中管理
• 避免在 OnInitialized 中做一次性初始化逻辑（比如订阅事件），因为组件可能反复创建；改用 OnParametersSet 或手动控制
• 如果组件有异步加载逻辑（如 OnInitializedAsync），确保异常有兜底，防止白屏

基本上就这些。核心是分清“换组件”还是“换内容”——前者用 DynamicComponent，后者用 RenderFragment，再辅以 @key 和状态设计，就能稳稳撑起复杂动态 UI。