Blazor中如何实现通用组件展示基类子类的专属属性？

你声明的变量request是基类RequestForm类型，C#是静态类型语言，编译阶段只会识别基类定义的成员。哪怕你实际赋值的是子类PTORequestForm实例，编译器也只认RequestForm的属性/方法，直接访问StartDate这类子类专属成员会编译不通过，这是静态类型检查导致的。另外要确认JSON反序列化时是否真的生成了正确的子类实例——如果用默认的System.Text.Json，需要配置类型鉴别器（比如加[JsonPolymorphic]特性），不然可能反序列化成基类实例，连运行时类型都不对。

1. 类型模式匹配（最直接） #

在Blazor组件里用C#的类型模式匹配，把基类实例转换成子类后访问专属属性：

@if (request is PTORequestForm ptoRequest)
{
    <p>开始日期：@ptoRequest.StartDate</p>
}
else if (request is ChangeDeptRequestForm deptRequest)
{
    <p>目标部门：@deptRequest.TargetDept</p>
}

这种写法简单直接，适合请求类型不多的场景。

2. 访问者模式 #

适合请求类型较多、后续可能扩展的场景，把不同子类的处理逻辑解耦：

• 先定义访问者接口：

public interface IRequestFormVisitor
{
    void Visit(PTORequestForm ptoForm);
    void Visit(ChangeDeptRequestForm deptForm);
}

• 基类RequestForm加抽象的Accept方法：

public abstract class RequestForm
{
    public abstract void Accept(IRequestFormVisitor visitor);
}

• 子类实现Accept：

public class PTORequestForm : RequestForm
{
    public DateTime StartDate { get; set; }
    public override void Accept(IRequestFormVisitor visitor) => visitor.Visit(this);
}

• 然后写Blazor专用的访问者，负责渲染不同表单：

public class RequestFormRenderer : IRequestFormVisitor
{
    public RenderFragment RenderedContent { get; private set; }

    public void Visit(PTORequestForm ptoForm)
    {
        RenderedContent = builder =>
        {
            builder.OpenElement(0, "p");
            builder.AddContent(1, $"开始日期：{ptoForm.StartDate:yyyy-MM-dd}");
            builder.CloseElement();
        };
    }

    public void Visit(ChangeDeptRequestForm deptForm)
    {
        RenderedContent = builder =>
        {
            builder.OpenElement(0, "p");
            builder.AddContent(1, $"目标部门：{deptForm.TargetDept}");
            builder.CloseElement();
        };
    }
}

• 在组件里使用：

@{
    var renderer = new RequestFormRenderer();
    request.Accept(renderer);
}
@renderer.RenderedContent

3. 多态模板方法 #

让子类自己负责渲染专属部分，基类定义抽象的渲染方法：

public abstract class RequestForm
{
    public abstract RenderFragment RenderCustomContent();
}

public class PTORequestForm : RequestForm
{
    public DateTime StartDate { get; set; }
    public override RenderFragment RenderCustomContent()
    {
        return @<p>开始日期：@StartDate</p>;
    }
}

组件里直接调用：

@request.RenderCustomContent()

这种方式把渲染逻辑和子类绑定，适合每个子类的渲染逻辑差异较大的情况。

完全可以实现通用组件处理不同子类，推荐两种方式：

1. 通用组件+类型匹配：在一个通用组件里用模式匹配分支渲染不同子类的字段，比如：

@typeparam TRequest where TRequest : RequestForm
[Parameter] public TRequest Request { get; set; }

@if (Request is PTORequestForm pto)
{
    <div class="pto-form">
        <label>开始日期：</label>
        <input type="date" @bind="pto.StartDate" />
    </div>
}
else if (Request is ChangeDeptRequestForm dept)
{
    <div class="dept-form">
        <label>目标部门：</label>
        <input @bind="dept.TargetDept" />
    </div>
}

使用时直接传入对应子类实例：<RequestFormComponent Request="@ptoRequest" />

2. 通用组件+动态加载子组件：给每个请求类型写小型的专属子组件，然后在通用组件里根据类型动态加载：

[Parameter] public RequestForm Request { get; set; }

@{
    Type componentType = Request switch
    {
        PTORequestForm => typeof(PTOFormComponent),
        ChangeDeptRequestForm => typeof(ChangeDeptFormComponent),
        _ => typeof(DefaultFormComponent)
    };
}

<DynamicComponent Type="@componentType" Parameters="@(new Dictionary<string, object> { { "Request", Request } })" />

这种方式把不同表单的UI拆分成小组件，通用组件只负责分发，后续扩展新请求类型时只需要加新的子组件，不需要修改通用组件，符合开闭原则。

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