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

Question

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

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

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

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

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

Answer 1

不是让 .razor 文件创建一个 .cs 文件。

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

然后覆盖 BuildRenderTree

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

如果您不确切知道如何使用 RenderTreeBuilder，只需创建一个临时 razor 文件并创建您想要的标记，然后查看 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>