如何扩展 Blazor 组件？答案

【问题标题】：How to Extend a Blazor component?如何扩展 Blazor 组件？
【发布时间】：2023-01-12 07:59:13
【问题描述】：

我目前正在使用 MudBlazor 并且非常喜欢它。

然而，有些东西我发现自己反复添加到组件中，比如 CancellationTokens，我自己定制模板。

有没有办法完全继承/扩展现有组件？

一种选择是制作一个新组件，其中包含我要修改的组件的实例，并将所有参数添加到我的组件并将它们映射回原始组件，但我觉得必须有更好的方法。

【问题讨论】：

您可以通过扩展添加方法，但不能添加属性。您可以从 MudBlazor 组件创建自己的子组件，然后使用它们。但是您可能想将您的东西添加到继承树的更高位置，这是不可能的。您始终可以创建自己的自定义 MudBlazor 库（如果 MudBlazor 允许的话）。
没有简单的方法可以在 Blazor 中扩展组件——从某种意义上说，您继承了渲染但开始修改逻辑。唯一的方法是将组件包装在另一个组件中并使用它——类似于装饰器模式。您可以通过将重复逻辑抽象到一个类中并通过装饰器组件中的服务/创建来提供该类的实例，从而更有效地做到这一点。

标签： blazor blazor-webassembly asp.net-blazor mudblazor

【解决方案1】：

Attribute splatting 对于围绕其他组件创建包装器或更高级别的抽象非常方便：

<MudTextField Variant="@Variant" @attributes="@OtherAttributes"></MudTextField>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> OtherAttributes { get; set; }

    [Parameter]
    // can even set your own defaults
    public Variant Variant { get; set; } = "Variant.Filled"
}

您还可以创建自己的基础组件并使用@inherits 共享逻辑和参数。

【讨论】：

【解决方案2】：

您可以像任何其他非密封类一样继承 blazor 组件

using Microsoft.AspNetCore.Components;
using MudBlazor;

namespace MyMudBlazor;
public partial class MyMudButton : MudButton
{
    [Parameter] public bool IsEnabled
    {
        get { return !base.Disabled; }
        set { base.Disabled = !value; }
    }
}

【讨论】：