如何将HTML属性(类等)添加到Blazor组件

Question

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

假设你有一个名为<Button>的Blazor组件，这个组件有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; }
}