Blazor WASM问题：继承无法渲染基类中的标记内容

• 方法一：基类定义RenderFragment属性（适合纯C#编写的基类）
  如果基组件是用C#代码实现的，可在基类中封装一个RenderFragment属性来承载通用UI逻辑，子类在Razor中直接渲染该Fragment即可：

  基类C#代码：

  public class BaseDownloadComponent : ComponentBase
  {
      [Inject] protected IDownloadService DownloadService { get; set; }
  
      // 封装基类的通用UI内容
      protected RenderFragment BaseContent => builder =>
      {
          builder.OpenElement(0, "div");
          builder.AddAttribute(1, "class", "download-controls");
          builder.AddContent(2, "通用下载控件：");
          builder.OpenElement(3, "button");
          builder.AddAttribute(4, "onclick", EventCallback.Factory.Create(this, HandleDownload));
          builder.AddContent(5, "下载数据");
          builder.CloseElement();
          builder.CloseElement();
      };
  
      protected void HandleDownload()
      {
          DownloadService.DownloadData();
      }
  }
  

  子类Razor代码：

  @inherits BaseDownloadComponent
  
  <!-- 先渲染基类的通用内容 -->
  @BaseContent
  
  <!-- 再添加页面专属内容 -->
  <div class="page-content">
      <h2>用户管理页面</h2>
      <!-- 页面具体逻辑 -->
  </div>
  

• 方法二：基类用Razor组件+@RenderBody()（推荐方案）
  这种方式符合Blazor组件开发的常规模式，基组件用Razor编写通用UI和逻辑，通过@RenderBody()为子类预留自定义内容的插入位置：

  基类Razor（BaseDownloadComponent.razor）：

  @inject IDownloadService DownloadService
  
  <div class="common-download-bar">
      <span>全局下载工具：</span>
      <button @onclick="HandleDownload" class="btn-primary">导出数据</button>
  </div>
  
  <!-- 子类内容会自动渲染到这里 -->
  @RenderBody()
  
  @code {
      protected void HandleDownload()
      {
          DownloadService.ExportAllData();
      }
  }
  

  子类Razor代码：

  @inherits BaseDownloadComponent
  
  <!-- 此处内容会插入到基类的@RenderBody()位置 -->
  <div>
      <h1>订单列表</h1>
      <!-- 订单页面专属UI -->
  </div>
  

• 方法三：重写BuildRenderTree（适合精细控制渲染顺序的场景）
  如果需要手动控制渲染流程，可在子类的@code块中重写BuildRenderTree方法，先调用基类的渲染逻辑，再添加子类内容：

  基类C#代码：

  public class BaseDownloadComponent : ComponentBase
  {
      [Inject] protected IDownloadService DownloadService { get; set; }
  
      protected override void BuildRenderTree(RenderTreeBuilder builder)
      {
          // 基类的UI渲染逻辑
          builder.OpenElement(0, "div");
          builder.AddAttribute(1, "class", "download-panel");
          builder.AddContent(2, "通用下载区域");
          builder.OpenElement(3, "button");
          builder.AddAttribute(4, "onclick", EventCallback.Factory.Create(this, HandleDownload));
          builder.AddContent(5, "下载");
          builder.CloseElement();
          builder.CloseElement();
      }
  
      protected void HandleDownload()
      {
          DownloadService.DownloadData();
      }
  }
  

  子类Razor代码：

  @inherits BaseDownloadComponent
  
  @code {
      protected override void BuildRenderTree(RenderTreeBuilder builder)
      {
          // 先执行基类的渲染逻辑
          base.BuildRenderTree(builder);
          // 再添加子类的UI内容
          builder.OpenElement(10, "div");
          builder.AddContent(11, "页面专属内容");
          builder.CloseElement();
      }
  }
  

注意：如果子类同时使用Razor标记和重写BuildRenderTree，Razor中的标记不会被渲染——因为编译器生成的BuildRenderTree会被你重写的方法覆盖，这种场景下优先选择前两种方法。

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