如何向 Blazor 组件添加 HTML 属性（类等）？

Question

这似乎是一个非常基本的问题，但我还没有找到我正在寻找的答案。

假设您有一个名为 的 Blazor 组件<Button>，该组件具有诸如Label等参数。当您使用该组件时，这些参数的接收方式类似于 HTML 属性：

<Button Label="Sign Up" />

但是如何为组件设置实际的 HTML 属性？！例如，假设您想为组件表示的元素提供额外的类，或标题属性、角色或类型等。以下显然不起作用，因为组件标记上的所有属性都是预期的成为该组件的参数：

<Button Label="Sign Up" class="foo" type="submit" id="bar" />

因此，我能想到的唯一方法是为该组件内的每个属性声明一个参数（公共属性）。

<button type="@Type" class="button @Class" id="@Id">@Label</button>

@code {
    [Parameter]
    public string Class { get; set; }

    [Parameter]
    public string Type { get; set; }

    [Parameter]
    public string Role { get; set; }

    [Parameter]
    public string Id { get; set; }

    // And others
}

然后在使用组件时你这样做：

<Button Label="Sign Up" Class="foo" Id="bar" Type="Submit" />

但这显然并不理想。这不方便，而且看起来像是一个不必要的抽象层。

所以，我的问题是：这应该怎么做？如果有这样的事情，那么“标准”的方法是什么。难道没有比为每个属性声明参数更方便的方法吗？

我一般是 SPA 框架的新手，所以我也想知道在其他 SPA 框架（例如 React、Angular、Vue 等）中通常是如何完成的

谢谢。

Answer 1

你在追求属性飞溅：

<button @attributes="@InputAttributes">@ChildContent</button>

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

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