代码之家 › 专栏 › 技术社区 › Adam

根据使用者的选择在Blazor组件中发出不同的标记

.net-5 blazor-webassembly blazor c#

0

Adam · 技术社区 · 4 年前

我正在构建一个由Tab、TabHeader和TabBody组成的Tab组件。这些是独立于主题的,TabHeader可能会发出任何标记,例如 <li> 或 <div> 或者其他,取决于组件的消费者想要什么:

@page "/"
<ul>
    <TabHeader>
        <a href="#">Music</a>
    </TabHeader>
</ul>

@onclick 和 @attributes

<li @onclick="TabSelected" @attributes="AdditionalAttributes">
    @ChildContent
</li>

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

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

        private void TabSelected(MouseEventArgs obj)
        {
            // do something
        }
}

在前面的示例中,我使用了harcoded <li> ,而我想让组件使用者选择确定他们想要什么作为HTML元素(可能他们想要一个span、li、div或其他什么),然后我想附加到它 @单击 和 . Blazor中有没有一种优雅的方法可以将标签切换到消费者选择的任何东西?

例如,允许消费者编写如下内容:

...
<TabHeader Tag='li'>
   ...
</TabHeader>
...

0 回复 | 直到 4 年前

1

2

Just the benno 4 年前

我试着回答你的问题,而不是争论用例。您所能做的不是为您的组件创建一个.razor文件,而是一个纯C文件,并重写 BuildRenderTree 方法。这不像使用.razor文件那么方便,让编译器发挥它的魔力,但是它允许您根据标记参数插入任何HTML标记。

public class TabHeader : ComponentBase
{
  [Parameter]
        public String Tag { get; set; }

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

        /// <inheritdoc />
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, Tag);
            builder.AddMultipleAttributes(1, AdditionalAttributes);
            builder.AddAttribute(2, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, TabSelected));
            builder.AddContent(3, ChildContent);
            builder.CloseElement();
        }

        private void TabSelected(MouseEventArgs obj)
        {
            // do something
        }
}