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

Question

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

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

<Button Label="Sign Up" />

但是如何为组件设置实际的 HTML 属性？！例如，假设你想给组件代表的元素额外的类，或者一个标题属性，或者角色，或者类型等等。下面显然是行不通的，因为所有的属性都在一个组件标签应该是该组件的参数：

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

所以，我能想到的唯一方法是为该组件内的每个属性声明一个参数 (public 属性)。

<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

您在 attribute splatting 之后：

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

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

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

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

How to add HTML attributes (class, etc.) to Blazor components?

blazor

blazor-server-side

blazor-webassembly