Blazor 怎么动态渲染组件

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

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、绑定表达式、事件处理器，甚至嵌套其他组件
• 适合封装布局容器，把结构逻辑留在父组件，展示逻辑交给使用者

示例（父组件定义）：

<p class="card">
  <p class="card-header">@Title</p>
  <p class="card-body">@ChildContent</p>
</p>
@code {
    [Parameter] public string Title { get; set; } = "默认标题";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

登录后复制

调用处写法：

标签： html 处理器 编码 switch 异步加载 键值对 重绘