Blazor - 扩展另一个组件的正确方法是什么?

Par*_*a99 4 blazor razor-components blazor-webassembly

我正在使用 MudBlazor 组件库。为了显示表单按钮上的加载,文档指南如下:

<MudButton Disabled="@_processing" OnClick="ProcessSomething" Variant="Variant.Filled" Color="Color.Primary">
    @if (_processing)
    {
        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
        <MudText Class="ms-2">Processing</MudText>
    }
    else
    {
        <MudText>Click me</MudText>
    }
</MudButton>
Run Code Online (Sandbox Code Playgroud)

现在,由于我经常这样做,因此我想将此逻辑包装在另一个组件中。

以下组件不执行此操作:

@inherits MudButton

@code {
    bool _loading;

    [Parameter]
    public bool Loading 
    {
        get => _loading;
        set
        {
            _loading = value;
            Disabled = value;
        }
    }

    [Parameter]
    public new RenderFragment ChildContent 
    {
        get => base.ChildContent;
        set => base.ChildContent = ExtendContent(value);
    }

    private RenderFragment ExtendContent(RenderFragment baseContent) => __builder =>
    {
        if (Loading)
        {
            <MudProgressCircular Class="ms-n2" Size="Size.Small" Indeterminate="true" />
        }
        @baseContent
    };
}
Run Code Online (Sandbox Code Playgroud)

我收到此错误:

类型“<my_component>”声明了多个与名称“childcontent”匹配的参数。参数名称不区分大小写并且必须是唯一的。

Bri*_*ker 5

创建一个用于加载内容的组件:

ButtonLoadingContent.razor

@using MudBlazor
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
<MudText Class="ms-2">Processing</MudText>
Run Code Online (Sandbox Code Playgroud)

BaseLoadingMudButton.cs

using MudBlazor;

public class BaseLoadingMudButton<TComponent> : MudButton
    where TComponent : ComponentBase
{
    protected override void OnParametersSet()
    {
        Disabled = Loading;

        if (Loading is true)
        {
            ChildContent = builder =>
            {
                builder.OpenComponent<TComponent>(sequence: 1);
                builder.CloseComponent();
            };
        }
        base.OnParametersSet();
    }

    [Parameter]
    public bool Loading { get; set; }
}
Run Code Online (Sandbox Code Playgroud)

LoadingMudButton.cs

public class LoadingMudButton : BaseLoadingMudButton<ButtonLoadingContent> { }
Run Code Online (Sandbox Code Playgroud)

用法

<LoadingMudButton Loading=_processing OnClick="ProcessSomething" Variant="Variant.Filled" Color="Color.Primary">
    <MudText>Click me</MudText>
</LoadingMudButton>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述 在此输入图像描述

为什么它有效?我没有使用.razor文件进行继承。基本组件不必使用泛型,我将其包含在内是为了使其更加灵活并作为示例。