Blazor组件渲染问题：如何正常渲染Object列表组件而非ToString结果

问题原因 #

你直接手动创建组件实例并存入object列表，Blazor无法识别这是需要渲染的组件，只会将其当作普通对象调用ToString()输出。同时，手动new组件实例会绕过Blazor的生命周期管理，导致组件无法正常工作。

推荐解法：使用DynamicComponent（符合Blazor设计规范） #

DynamicComponent是Blazor官方提供的动态渲染组件的工具，能自动处理组件生命周期，代码简洁易维护。

1. 定义存储组件类型与参数的记录类

public record ComponentEntry(Type ComponentType, IDictionary<string, object> Parameters);

2. 修改Index.razor代码

@page "/"

@foreach (var entry in componentEntries)
{
    <DynamicComponent Type="@entry.ComponentType" Parameters="@entry.Parameters" />
}

@code {
    private List<ComponentEntry> componentEntries = new();

    protected override void OnInitialized()
    {
        // 添加Dog组件及参数
        componentEntries.Add(new ComponentEntry(
            typeof(Dog),
            new Dictionary<string, object> { { nameof(Dog.Message), "Doge" } }));

        // 添加Cat组件及参数
        componentEntries.Add(new ComponentEntry(
            typeof(Cat),
            new Dictionary<string, object> { { nameof(Cat.Message), "Meow" } }));
    }

    // 内部定义组件信息存储类
    public record ComponentEntry(Type ComponentType, IDictionary<string, object> Parameters);
}

备选解法：手动通过RenderTreeBuilder渲染组件 #

若需更精细控制渲染逻辑，可通过RenderTreeBuilder手动构建渲染树（不推荐，易引发生命周期问题）：

@page "/"

@foreach (var component in components)
{
    @RenderComponent(component)
}

@code {
    private List<ComponentBase> components = new();

    protected override void OnInitialized()
    {
        components.Add(new Dog { Message = "Doge" });
        components.Add(new Cat { Message = "Meow" });
    }

    private RenderFragment RenderComponent(ComponentBase component) => builder =>
    {
        builder.OpenComponent(0, component.GetType());
        // 手动映射组件参数
        if (component is Dog dog)
        {
            builder.AddAttribute(1, nameof(Dog.Message), dog.Message);
        }
        else if (component is Cat cat)
        {
            builder.AddAttribute(1, nameof(Cat.Message), cat.Message);
        }
        builder.CloseComponent();
    };
}

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