Блог

Это кажется очень простым вопросом, но мне еще предстоит найти ответ, который я ищу.

Допустим, у вас есть вызываемый компонент 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 и т. Д.)

Спасибо.

Вы после разбиения атрибутов :

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

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

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