c# - 如何在 blazor 中手动渲染父组件的 razor 代码？

Question

简介

我正在尝试扩展 MudTextField<T> 的功能来自mudblazor图书馆。通常我会创建一个包装器，但由于我想要更改的行为仅在 protected 方法中可用，因此我选择继承 MudTextField<T>成分。目标是创建一个克隆，仅在我通过覆盖某些方法更改的功能上有所不同。

继承组件

所以我创建了一个 CustomMudTextField<T>组件。

CustomMudTextField.razor

@using System.Runtime.CompilerServices
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.RenderTree
@inherits MudTextField<T>
@typeparam T

@code
{
    // omitted custom logic
}

问题在于，基本控件不再被渲染。所以我尝试手动渲染基类。我从 docs 中获得灵感.

CustomMudTextField.razor

@using System.Runtime.CompilerServices
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.RenderTree
@inherits MudTextField<T>
@typeparam T

@CustomRender

@code
{
    private RenderFragment CustomRender { get; set; }
    private RenderFragment RenderBase() => builder =>
    {
        base.BuildRenderTree(builder);
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        CustomRender = RenderBase();
    }

    // omitted custom logic
}

我希望它能像基本组件一样工作。现在父级的 UI 确实已渲染，但基本功能根本不起作用。

我也尝试过 this github issue 中讨论的方法，但以下代码片段甚至不再编译。

@inherits BaseComponent
@{ 
    base.BuildRenderTree(__builder);
}

---

那么如何呈现基本控件的内容？

其他 UI 框架使用可用于呈现基本控件的组件。我希望它的工作方式与 blazors @ChildContent mechanic 类似。 ，尽管这是一个完全不同的概念。有没有办法继承和渲染MudTextField<T>这样它的行为就会完全相同？ 我错过了什么？

Answer 1

如果您不更改渲染片段。您只需创建一个新类 .cs 并继承该组件即可。由于它不使用 .razor ，因此不会覆盖渲染片段。例如:

ComponentA.razor

<h1>@Name</h1>
<button @onclick="DoSomething">Do Something</button>
@x
@code {
    protected  int x = 0;
    public virtual string Name {get;set;} = "ComponentA";
    public virtual void DoSomething()
    {
        x = x + 1;    
    }
}

ComponentB.cs

    public class SomeComponentB : SomeComponentA
    {
        override public string Name {get;set;} = "ComponentB";
        
        override  public void DoSomething()
        {
            x = x + 2;    
        }
    }

ComponentB 仍然继承 ComponentBase 并且可以用作组件。

<ComponentB />

这是一个工作 REPL

更新:

注意:如果要在派生类中添加内容，可以重写 BuildRenderTree 方法，如下所示:

 public class SomeComponentB : SomeComponentA
 {
      private string message = "A message from derived component";
      override public string Name {get;set;} = "ComponentB";
        
      override  public void DoSomething()
      {
            x = x + 2;    
      }
    

      protected override void BuildRenderTree(RenderTreeBuilder __builder)
      {
           
          __builder.OpenElement(0, "div");
          __builder.AddContent(1, message);
          __builder.CloseElement();

          base.BuildRenderTree(__builder);
      }
 }