Blazor组件继承后仅显示子组件内容，如何合并渲染父子内容？

问题原因 #

你的写法混淆了Blazor的组件继承和嵌套布局逻辑：每个.razor文件都会自动生成对应C#类，并重写BuildRenderTree方法实现自身渲染逻辑。你的MyComponent.razor继承了MyComponentBase，但它自身的Razor模板生成的BuildRenderTree直接覆盖了基类的渲染逻辑，所以基类里的布局代码完全不会执行，只会显示子类自身的内容。

解决方案 #

方案1（更推荐：组合优先于继承） #

这是Blazor实现通用布局的常规写法，不需要用到继承：

1. MyComponentBase.razor保持现有代码不变，作为通用布局容器。
2. 修改MyComponent.razor代码如下，直接嵌套使用布局容器：

<MyComponentBase>
    <p>My Content</p>
</MyComponentBase>

3. MyPage.razor代码无需修改，直接调用<MyComponent/>即可得到预期渲染结果。

方案2（坚持使用继承实现） #

如果必须用继承的写法，需要主动在子类中触发基类的渲染逻辑，并把子类内容赋值给基类的ChildContent参数：
修改MyComponent.razor代码如下：

@inherits MyComponentBase
@{
    // 执行基类的渲染逻辑
    base.BuildRenderTree(__builder);
}

@code {
    protected override void OnInitialized()
    {
        // 将子类内容赋值给基类的ChildContent参数
        ChildContent = @<p>My Content</p>;
    }
}

两种方案都可以实现你预期的渲染效果，优先推荐方案1，更符合Blazor的设计规范，后续维护扩展也更灵活。

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