在 Blazor 中，如何动态更改 HTML 标记？

Question

假设我的 Blazor 组件中有以下标记：

<div @attributes=Attributes data-myattr="something">
    @ChildContent
</div>

我想为父组件提供一种方法来确定将使用哪个标签来代替<div>。比如：

<@Tag @attributes=Attributes data-myattr="something">
    @ChildContent
</@Tag>

@Tag 是一个字符串参数。当然，这是行不通的。我知道模板，但它对我不起作用，因为我想控制标签的结构，并为其添加额外的属性。我只想让用户选择要显示的标签。

Answer 1

创建一个 .cs 文件，而不是使用 .razor 文件。

在文件中创建你的类public class MyComponent: ComponentBase

然后覆盖 BuildRenderTree

注意：在以后的版本中，您需要在Dictionary<string, object 和RenderFragment 之后添加?，以表明它们可以为空。

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
  builder.OpenElement(0, YourParameter);
  builder.CloseElement();
}

如果您不确切知道如何使用 RenderTreeBuilder，只需创建一个临时剃须刀文件并创建您想要的标记，然后查看obj\Debug\netstandard2.1\Razor\

如果您想在 .razor 文件中实现这一点，那么您可以创建如下所示的组件

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using System;
using System.Collections.Generic;
using System.Linq;

namespace BlazorApp118.Shared
{
    public class Dynamic : ComponentBase
    {
        [Parameter]
        public string Tag { get; set; }

        [Parameter]
        public Dictionary<string, object> AdditionalAttributes { get; set; }

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

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            if (string.IsNullOrWhiteSpace(Tag))
                throw new ArgumentNullException(nameof(Tag));

            builder.OpenElement(0, Tag);
            if (AdditionalAttributes?.Any() == true)
                builder.AddMultipleAttributes(1, AdditionalAttributes);
            if (ChildContent != null)
                builder.AddContent(2, ChildContent);
            builder.CloseElement();
        }
    }
}

然后像这样使用它

<Dynamic Tag="a" AdditionalAttributes=@SomeDictionaryOfValues>
  Any content you want here
</Dynamic>