Blazor 继承 ChildContent RenderFragments？

假设我们有一个基本组件ParentComponent.razor:

<div id="ParentComponent">@ChildContent</div>

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

可以这样使用：

<ParentComponent>
    <div>content</div>
</ParentComponent>

这会呈现：

<div id="ParentComponent"><div>content</div></div>

但是假设我们想要一个ChildComponent.razor继承自ParentComponent.razor:

@inherits ParentComponent

<div id="ChildComponent">@ChildContent</div>

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

有没有办法填充父组件的@ChildContent来自 ChildComponent 的 RenderFragment？

<ChildComponent>
    child content
</ChildComponent>

为了产生这个：

<div id="ParentComponent">
    <div id="ChildComponent">child content</div>
</div>

不知道我是否遗漏了一些明显的东西，但已经搞砸了一段时间并且无法在互联网上找到任何答案。

编辑 - 替代解决方案

我找到了另一种方法，它不依赖于直接重写 BuildRenderTree 方法，并允许您使用 html/razor 标记，尽管这确实意味着在房子周围走动。也不确定这是否安全或高性能，但为了完整起见将其放在这里。

ParentElement.razor

@using Microsoft.AspNetCore.Components.Rendering;

@if (!HasRendered()) {
    SetRenderedStatus();
    <div id="ParentComponent">
        RenderChild(__builder);
    </div>
}

@code {
    protected bool _hasBaseRendered = false;

    protected bool HasRendered() {
        return _hasBaseRendered;
    }

    protected void SetRenderedStatus() {
         _hasBaseRendered = true;
    }

    protected virtual void RenderChild(RenderTreeBuilder __builder) { }
}

ChildElement.razor

@using Microsoft.AspNetCore.Components.Rendering
@inherits ParentElement

@if (HasRendered()) {
    <div id="ChildComponent">
         @ChildContent
    </div>
}
@{
    base.BuildRenderTree(__builder);
}

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

    protected override void RenderChild(RenderTreeBuilder __builder) {
        this.BuildRenderTree(__builder);
    }
}

如此快速的解释，IDE/编译器中的功能清楚地将代码的 razor/html 标记部分编译为BuildRenderTree幕后的方法，这就是为什么你不能在一个.razor成分。

上面的代码编译为：

ChildElement.razor

protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
    if (HasRendered())
    {
        __builder.AddContent(0, "    ");
        __builder.OpenElement(1, "div");
        __builder.AddAttribute(2, "id", "ChildComponent");
        __builder.AddMarkupContent(3, "\r\n        ");
        __builder.AddContent(4, ChildContent);
        __builder.AddMarkupContent(5, "\r\n    ");
        __builder.CloseElement();
        __builder.AddMarkupContent(6, "\r\n");          
    }
    base.BuildRenderTree(__builder);
}

所以 ChildContent 被忽略HasRendered为 false，并指示调用base.BuildRenderTree在父类上。

ParentElement.razor

protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
    if (!HasRendered())
    {
        SetRenderedStatus();
        __builder.AddContent(0, "        ");
        __builder.OpenElement(1, "div");
        __builder.AddAttribute(2, "id", "ParentComponent");
        __builder.AddMarkupContent(3, "\r\n");
        RenderChild(__builder);
        __builder.AddContent(4, "        ");
        __builder.CloseElement();
        __builder.AddMarkupContent(5, "\r\n");
    }
}

它呈现父母标记，中途被定向到RenderChild它在子进程上被覆盖，这将流程返回到子进程的一个级别，其中它BuildRenderTree然后被称为HasRenderedcheck 将确保避免无限循环，然后在返回到父级完成之前渲染标记的子级部分。

这可能会被重构，只是我当前的工作副本实验。

复制并测试...

父组件.cs

public partial class ParentComponent : ComponentBase
{
    [Parameter] public RenderFragment ChildContent { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "id", "ParentComponent");
        builder.AddContent(2, ChildContent);
        builder.CloseElement();
        
        base.BuildRenderTree(builder);
    }
}

子组件.cs

public partial class ChildComponent : ParentComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenComponent<ParentComponent>(0);
        builder.AddAttribute(1, "ChildContent", (RenderFragment)((builder2) => 
       {
            builder2.OpenElement(1, "div");
            builder2.AddAttribute(2, "id", "ChildComponent");
            builder2.AddContent(3, ChildContent);
            builder2.CloseElement();
        } ));

        builder.CloseComponent();
    
    }
}

索引剃刀

@page "/"

<ChildComponent>child content</ChildComponent>