如何在Blazor中复用用于组件渲染的switch代码段

错误原因说明 #

你之前封装的返回字符串的方法无法生效，因为Blazor不会将返回的字符串解析为组件实例，只会当作纯文本内容渲染。Blazor中动态返回可渲染内容需要使用RenderFragment类型。

方案1：封装RenderFragment方法（同页面复用） #

直接将渲染逻辑封装为返回RenderFragment的方法即可直接在页面中调用：

封装方法 #

private RenderFragment RenderWidget(IComponent widget)
{
    return @<text>
        @switch (widget)
        {
            case WidgetA:
                <WidgetA />
                break;
            case WidgetB:
                <WidgetB />
                break;
            default:
                <div>不支持的组件类型</div>
                break;
        }
    </text>;
}

调用方式 #

<div class="row">
    <div class="col-md-6">
        @foreach (var widget in _components21)
        {
            @RenderWidget(widget)
        }
    </div>
    <div class="col-md-6">
        @foreach (var widget in _components22)
        {
            @RenderWidget(widget)
        }
    </div>
</div>

方案2：封装为独立组件（跨页面复用） #

如果需要在多个页面中复用该逻辑，可以封装为通用的渲染组件，新建WidgetRenderer.razor：

@switch (Widget)
{
    case WidgetA:
        <WidgetA />
        break;
    case WidgetB:
        <WidgetB />
        break;
    default:
        <div>不支持的组件类型</div>
        break;
}

@code {
    [Parameter]
    public IComponent Widget { get; set; }
}

调用方式：

@foreach (var widget in _components)
{
    <WidgetRenderer Widget="@widget" />
}

方案3：使用内置DynamicComponent（无需维护Switch逻辑） #

如果后续会新增大量组件类型，可使用Blazor内置的DynamicComponent实现更灵活的渲染，只需维护类型映射字典即可：

// 定义组件类型映射，新增组件只需添加对应键值对
private readonly Dictionary<Type, Type> WidgetMap = new()
{
    [typeof(WidgetA)] = typeof(WidgetA),
    [typeof(WidgetB)] = typeof(WidgetB)
};

渲染逻辑：

@foreach (var widget in _components)
{
    if (WidgetMap.TryGetValue(widget.GetType(), out var componentType))
    {
        <DynamicComponent Type="@componentType" />
    }
}

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