Blazor中如何用单个Razor组件渲染不同子类的基类属性？

你可以通过泛型Blazor组件来实现这个需求，让ListComponent兼容所有继承自DomainModel的子类列表，具体步骤如下：

1. 创建泛型ListComponent组件 #

在ListComponent.razor中定义泛型类型参数，并约束为DomainModel的派生类，同时添加接收列表数据的参数：

@typeparam T where T : DomainModel

@if (Items != null)
{
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Items)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Name</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [Parameter, Required]
    public List<T>? Items { get; set; }
}

2. 在页面中使用泛型组件 #

在PageClass1.razor和PageClass2.razor中，指定泛型参数并传递对应的列表：

PageClass1.razor #

@page "/class1"

@code {
    private List<Class1> list1 = new()
    {
        new Class1 { Id = 1, Name = "Class1示例1", AnotherText1 = "额外文本1" },
        new Class1 { Id = 2, Name = "Class1示例2", AnotherText1 = "额外文本2" }
    };
}

<ListComponent T="Class1" Items="list1" />

PageClass2.razor #

@page "/class2"

@code {
    private List<Class2> list2 = new()
    {
        new Class2 { Id = 1, Name = "Class2示例1", AnotherText2 = "额外文本A" },
        new Class2 { Id = 2, Name = "Class2示例2", AnotherText2 = "额外文本B" }
    };
}

<ListComponent T="Class2" Items="list2" />

这样ListComponent就能统一渲染所有DomainModel子类的公共属性（Id和Name），同时保持对不同子类列表的兼容性。如果后续需要渲染子类特有的属性，还可以通过添加模板参数（比如RenderFragment<T>）来扩展，让调用页面自定义子类属性的渲染逻辑。

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