如何在Blazor派生类中重写基类的RenderFragment

首先修正你代码中的基础语法错误：

• 基页面ShowData属性定义语法错误：protected bool ShowData {get;set; = false;} 应改为 protected bool ShowData { get; set; } = false;
• 基页面中模板引用名称不匹配：@TitleTemplate 应改为 @HeaderTemplate（与参数名称一致）
• 派生页面中StateHasChanged()缺少分号

接下来提供两种实现基页面继承并传递RenderFragment的正确方式：

方式一：组件继承（推荐，符合你的继承需求） #

基页面（BasePage.razor） #

将RenderFragment定义为抽象属性，强制派生页面实现：

@if (ShowData)
{
    <div class="header-container">
        @HeaderTemplate
    </div>
    <div class="body-container">
        @BodyTemplate
    </div>
}
else
{
    <Spinner />
}

@code {
    // 抽象属性，派生页面必须实现
    protected abstract RenderFragment HeaderTemplate { get; }
    protected abstract RenderFragment BodyTemplate { get; }

    protected bool ShowData { get; set; } = false;
}

派生页面（DerivedPage.razor） #

通过@inherits继承基页面，实现抽象的RenderFragment属性：

@inherits BasePage

@code {
    private object Data;
    [Inject] private SomeService SomeService { get; set; }

    // 实现基类的头部模板
    protected override RenderFragment HeaderTemplate => __builder =>
    {
        <h1>派生页面自定义头部</h1>
        <p>当前数据加载状态：@(ShowData ? "已加载" : "加载中")</p>
    };

    // 实现基类的主体模板
    protected override RenderFragment BodyTemplate => __builder =>
    {
        <div>
            <h3>数据内容</h3>
            <p>@Data?.ToString()</p>
        </div>
    };

    protected override async Task OnInitializedAsync()
    {
        Data = await SomeService.GetData();
        ShowData = true; // 直接修改基类的状态属性
        StateHasChanged();
    }
}

方式二：组件组合（Blazor推荐的组件复用方式） #

如果不需要严格的类继承，可将基页面作为父组件使用，通过参数传递RenderFragment：

基页面（BasePage.razor） #

保留参数式的RenderFragment定义：

@if (ShowData)
{
    <div class="header-container">
        @HeaderTemplate
    </div>
    <div class="body-container">
        @BodyTemplate
    </div>
}
else
{
    <Spinner />
}

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

    [Parameter]
    public RenderFragment BodyTemplate { get; set; }

    protected bool ShowData { get; set; } = false;

    // 提供公开方法让外部控制加载状态
    public void SetDataLoaded(bool loaded)
    {
        ShowData = loaded;
        StateHasChanged();
    }
}

派生页面（DerivedPage.razor） #

通过组件标签引用基页面，传递模板内容并控制状态：

<BasePage @ref="basePageRef">
    <HeaderTemplate>
        <h1>派生页面自定义头部</h1>
    </HeaderTemplate>
    <BodyTemplate>
        <p>数据内容：@Data?.ToString()</p>
    </BodyTemplate>
</BasePage>

@code {
    private object Data;
    private BasePage basePageRef;
    [Inject] private SomeService SomeService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data = await SomeService.GetData();
        basePageRef.SetDataLoaded(true);
    }
}

两种方式都能实现你需要的“所有页面继承基页面并使用自定义RenderFragment”的效果，方式一更贴合类继承的需求，方式二更符合Blazor组件组合的设计理念。

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