Blazor中子组件继承父组件时如何获取BuildRenderTree结果作为父组件ChildContent

Blazor可以实现你要的效果，无需手动嵌套组件，通过重写基类组件的渲染逻辑即可捕获子类的渲染输出作为基类的子内容。

最简实现方案 #

第一步：编写基类组件A #

不需要创建.razor视图，直接创建纯C#类继承ComponentBase，重写渲染逻辑，先渲染外层容器，再调用子类的渲染逻辑作为内层内容：

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

public class ComponentA : ComponentBase
{
    private RenderFragment _childRenderFragment;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        // 缓存子类渲染片段，避免重复生成
        _childRenderFragment ??= RenderChildContent;
        
        // 渲染基类A的外层div
        builder.OpenElement(0, "div");
        // 插入子类B的渲染内容
        builder.AddContent(1, _childRenderFragment);
        builder.CloseElement();
    }

    private void RenderChildContent(RenderTreeBuilder builder)
    {
        // 调用子类重写后的渲染逻辑，也就是子类B的渲染内容
        base.BuildRenderTree(builder);
    }
}

第二步：编写子类组件B #

正常创建.razor组件，只需要声明继承自ComponentA，其余内容和普通组件完全一致：

@inherits ComponentA

<div>
    这里是组件B的内容
</div>

第三步：路由组件直接调用 #

你现有的路由组件Z不需要做任何修改，直接使用<B />即可：

@page "/foo"

<B />

最终渲染出来的DOM结构和你预期完全一致：

<div>
    <div>
        这里是组件B的内容
    </div>
</div>

扩展说明 #

• 如果基类A需要添加额外的样式、属性或者其他公共内容，直接在基类的BuildRenderTree方法中添加对应节点即可，不会影响子类的逻辑
• 参数传递、生命周期方法的用法和普通Blazor组件完全一致，不需要额外适配
• 如果需要多层继承，只需要在中间层组件按照同样的逻辑重写BuildRenderTree即可实现多层嵌套效果

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