有条件 div 与 blazor 服务器

Question

这是我想要做的：

@if (condition)
{
  <div class="test">
}
<span class="test2">...</span>
@if (condition)
{
  </div>
}

这不起作用，因为 Blazor 编译器认为 div 永远不会关闭。

所以我需要这样做：

@if (condition)
{
  <div class="test">
        <span class="test2">...</span>
  </div>
}
else
{
   <span class="test2">...</span>
}

它工作正常，但我的跨度有很大的代码冗余。

我怎样才能正确地做到这一点？

请注意 div 和 span 是示例。实际上，我的代码更大。

谢谢

Answer 1

您看到的实际上是 Razor 语法问题，而不是具体的 Blazor 问题。这个question and answer盖的不错

因此，您可以执行第一个示例中尝试执行的操作，但还有其他方法可以解决该问题，至少其中一种方法是 Blazor 特定的（毫无疑问还有更多方法）：

使 class 成为条件

与其尝试不渲染 div，不如让 class 本身成为条件。

所以在页面的 code 部分你可以声明一个 属性:

@code {

    string myClass = "";

    protected override void OnInitialized()
    {
        if (condition) 
        {
            myClass = "whatever";
        }
    }

}

然后在你的剃须刀中使用它：

<div class='@myClass'> 
    <span class="test2">...</span>
</div>

这样跨度只会出现在页面上一次。

将通用代码拆分为单独的组件

另一种方法是将公共部分（在本例中为 span）制成一个单独的组件，然后有条件地渲染该组件：

@if (condition)
{
    <div class="test">
        <YourComponent />
    </div>
}
else
{
    <YourComponent />
}

对于您的示例中的跨度来说，这可能有点矫枉过正，但在新组件将替换多行代码的情况下更有意义。