继承自定义组件的Razor页面未调用BuildRenderTree问题及需求

当前问题原因 #

Razor组件编译时会自动生成BuildRenderTree方法，负责渲染Razor文件内的内容，默认不会调用基类的BuildRenderTree。因此CustomPage.razor继承BasePage后，仅渲染自身内容，基类的渲染逻辑被覆盖。

临时修复（针对现有代码） #

若要保留原有基类逻辑，可在Razor组件中显式调用基类的BuildRenderTree：

@inherits BasePage
@page "/custompage"

@{
    base.BuildRenderTree(__builder);
}

<h3>CustomPage.razor</h3>

最终需求实现（基组件自动包裹子内容） #

按照你的需求，通过RenderFragment参数传递子内容，让基组件自动用OtherComponent包裹，无需子组件感知，具体实现如下：

1. 定义OtherComponent.razor #

<div>@Body</div>

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

2. 重构BaseComponent.cs #

使用ChildContent参数接收子组件内容，在BuildRenderTree中渲染OtherComponent并传递内容：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

namespace Test.Pages;

public class BaseComponent : ComponentBase
{
    // 接收子组件的内容
    [Parameter] public RenderFragment ChildContent { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        // 渲染OtherComponent，将子内容作为Body参数传递
        builder.OpenComponent<OtherComponent>(0);
        builder.AddComponentParameter(1, nameof(OtherComponent.Body), ChildContent);
        builder.CloseComponent();
    }
}

3. 实现FinalComponent.razor #

只需继承BaseComponent，内容自动被基类包裹：

@inherits BaseComponent
@page "/finalpage"

<h3>My final content</h3>

效果验证 #

访问/finalpage时，输出的HTML为：

<div><h3>My final content</h3></div>

核心逻辑说明 #

• 基类通过[Parameter] RenderFragment ChildContent接收子组件的内容，这是Blazor组件传递内容的标准方式。
• 基类的BuildRenderTree负责渲染包裹组件（OtherComponent），并将子内容传递给它，完全对子组件透明。
• Razor组件继承基类后，其内部内容会自动绑定到ChildContent参数，无需额外代码。

内容的提问来源于stack exchange，提问作者Asier Cayón Francisco