如何在Blazor中通过类属性动态渲染视图（替代多条件判断）

Blazor没有直接对应WPF中UserControl的实例化绑定方式，但可以通过以下几种方案实现无需大量if-else判断的动态组件渲染，效果和你在WPF中的需求一致：

方案1：使用官方DynamicComponent（.NET 6+ 推荐） #

这是Blazor官方提供的动态组件渲染方式，直接通过组件类型和参数集合来渲染目标组件。

步骤1：在组件/ViewModel中定义属性 #

// 存储要渲染的组件类型
public Type TargetComponent { get; set; }
// 组件所需的参数（可选）
public Dictionary<string, object> ComponentParams { get; set; } = new();

步骤2：父组件中使用DynamicComponent #

<DynamicComponent Type="TargetComponent" Parameters="ComponentParams" />

步骤3：动态切换组件 #

// 切换到"UserProfile"组件并传递参数
TargetComponent = typeof(UserProfile);
ComponentParams = new Dictionary<string, object>
{
    { "UserId", 123 },
    { "UserName", "Joben" }
};
StateHasChanged(); // 非组件类中需调用通知刷新

方案2：使用RenderFragment属性传递组件 #

这种方式更接近WPF中直接赋值UserControl实例的思路，通过RenderFragment直接封装要渲染的组件逻辑。

步骤1：定义RenderFragment属性 #

public RenderFragment DetailView { get; set; }

步骤2：赋值要渲染的组件 #

// 封装UserProfile组件的渲染逻辑
DetailView = builder =>
{
    builder.OpenComponent<UserProfile>(0);
    builder.AddAttribute(1, "UserId", 123);
    builder.CloseComponent();
};
StateHasChanged();

步骤3：父组件中直接渲染 #

@DetailView

方案3：自定义动态组件容器（封装复用） #

如果需要更接近WPFUserControl容器的体验，可以封装一个通用组件：

自定义DynamicContentView.razor #

@if (Content != null)
{
    @Content
}

@code {
    [Parameter]
    public RenderFragment Content { get; set; }
}

使用方式 #

在父组件中：

<DynamicContentView Content="DetailView" />

赋值逻辑和方案2一致，只需把RenderFragment赋值给DetailView即可。

内容的提问来源于stack exchange，提问作者Joben