Blazor 在有条件的 div 包装器上关闭 div 标记答案

【问题标题】：Blazor Closes the div tag on a conditionally div wrapperBlazor 在有条件的 div 包装器上关闭 div 标记
【发布时间】：2021-05-03 10:25:44
【问题描述】：

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

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

<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 方法。我必须说不。因为标签和其中的类是动态的，所以我不能那样写。

我想做的是

@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。

【问题讨论】：

这些句子中需要'@'吗？ @:
这是@Html.Raw("your html in here") 的缩写版本。这在 Razor 页面和 mvc 中使用，并且按应有的方式工作。但在 blazor 中，标签在呈现下一个 html 和平之前以某种方式关闭。
我认为问题出在 Razor 预编译器中。当我遇到这种情况时，我要么用手写的@if .... else .... 将它编码出来，要么使用 RenderTreeBuilder 编写书面的 C# 代码。
这个问题需要更清楚 - 您拒绝完全有效的答案，因为它们不符合您未包含在问题中的标准。
Mrc 这是一种方法，但这会使代码非常难看。所以我选择了 BuildRenderTree

标签： c# html .net blazor blazor-server-side

【解决方案1】：

你必须使用BuildRenderTree

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

欲了解更多信息，请阅读这篇好文章Building Components Manually via RenderTreeBuilder

【讨论】：

谢谢我终于做到了。但遗憾的是 Html.Raw 函数在 blazor 上不起作用。我的意思是它只有一项工作，它是在 blazor 中添加的。那么为什么它不工作。我希望它很快得到修复。
好消息。 Html.Raw 自动修复 html 的错误。这是内部功能，我认为这是控制 html 输出的好方法。在高度自定义中，您必须使用 BuilderRenderTree。
如果最后有一个可选的布尔值来同时拥有这两个选项，那就太好了。

【解决方案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; }
}

它不支持动态标签类型，但使用实现 BuildRenderTree 的组件（如 mRizvandi 建议的那样）很容易创建。

【讨论】：