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

Question

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

假设你有一个名为 <Button> 的 Blazor 组件，该组件具有像 Label 等参数。当您使用该组件时，这些参数将像 HTML 属性一样被接收：

<Button Label="Sign Up" />

但是如何为组件设置实际的 HTML 属性呢？例如，假设你想要给代表该组件的 <button> 元素添加额外的类、title 属性、role 或 type 等等。以下方法显然行不通，因为组件标签上的所有属性都被期望成为该组件的参数：

<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等）

谢谢。

- aradalvand

---

看看属性分散。https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#attribute-splatting-and-arbitrary-parameters - Brian Parker

@BrianParker 啊，谢谢！你可以发布一个答案，我会把它标记为被接受的答案。 - aradalvand

Answer 1

你想了解 属性扩展 内容：

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

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

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

- Brian Parker