单行条件渲染是否可行？

Question

如何像在 React JSX 中一样在 Blazor 中呈现条件元素？

例如在React:

export const LoginPage: FC = () => {
  // useState's
  // useEffect's

  return <div>{!loadingState ? usernameState : <Spin />}</div>; // <-- Goal
};

我已经在 Blazor 中尝试过：

<div>
  You logged in AS:
  @if (_loading)
  {
    <Spin/>
  }
  else
  {
    @_userName
  }
</div>

有什么办法可以写成一行吗？

Answer 1

<div> You logged in AS: @if(_loading){ <Spin/> } else { @_userName } </div>

太棒了，对吧？

如果你特别想使用三元运算符，那我不确定，我得考虑一下。

Answer 2

回答你的问题：

如何像在 React JSX 中一样在 Blazor 中呈现条件元素？

您可以，但还有其他方法可以解决您展示的示例。显示某种形式的加载可视控件非常常见，您可以构建组件控件。

这是一个简单的例子：

LoadingControl.razor

@*@if (this.IsLoaded)
{
    @this.ChildContent
}
else
{
    <div class="loader"></div>
}*@

@_content

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

    [Parameter] public bool IsLoaded { get; set; }

    private RenderFragment _loader => builder => builder.AddMarkupContent(0, $"<div class='loader'></div>");

    private RenderFragment _content => this.IsLoaded ? ChildContent : _loader;
}

我已经展示了两种渲染内容的方法。

然后你像这样使用它：

<div>
  You logged in AS:
<LoadingControl IsLoaded="!_isLoading">
    @_userName
</LoadingControl>
</div>