Blazor 在有条件的 div 包装器上关闭 div 标签

Question

我试图根据某些条件将我的组件之一包装在某个特定标签上。

为了简单起见，假设我有一个

<div class="inner-class">
    this must be in inner-class div and wrapped in some-class div
</div>

如果 'condition' == true 那么它应该将它包装在另一个 div 结果应该是这样的

<div class="wrapper-class">
    <div class="inner-class">
        this must be in inner-class div and wrapped in some-class div
    </div>
</div>

在你说之前，使用 if-else 方法。我必须说不。因为标签和其中的 class 是动态的所以我不能那样写。

我尝试做的是

@if (condition)
{
    @:<div class="wrapper-class">
}
    <div class="inner-class">
        this must be in inner-class div and wrapped in some-class div
    </div>
}
@if (condition)
{
    @:</div>
}

我认为它应该可以胜任。但问题是浏览器在将内部 div 放入其中之前关闭了外部 div。

Answer 1

你必须使用BuildRenderTree

使用 BuilderRenderTree，您可以完全控制构建组件 html。

有关更多信息，请阅读这篇好文章 Building Components Manually via RenderTreeBuilder

Answer 2

我最终编写了一个类似于此的包装器组件来非常优雅地解决这个问题：

@if (Wrap)
{
    <div id="@Id" class="@Class">
        @ChildContent
    </div>
}
else
{
    @ChildContent
}
@code
{
    [Parameter] public string? Id { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool Wrap { get; set; }
}

它不支持动态标签类型，但是使用 mRizvandi 建议的实现 BuildRenderTree 的组件可以很容易地创建它。

Blazor 在有条件的 div 包装器上关闭 div 标签

Blazor Closes the div tag on a conditionally div wrapper

.net

html

c#

blazor

blazor-server-side