带有 Blazor 服务器的条件 div

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 有条件

您可以将class 本身设置为有条件的，而不是尝试不呈现div。

因此，您可以在页面的 code 部分声明一个属性：

@code {

    string myClass = "";

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

}

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

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

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

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

另一种方法是将公共部分（在这种情况下为跨度）制作成一个单独的组件，然后有条件地渲染该组件：

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

这对于您示例中的 span 来说可能有点过头了，但在新组件将替换多行代码的地方更有意义。