单行条件渲染是否可行？

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

回答你的问题：

How to render conditional elements in Blazor like in React JSX?

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

这是一个简单的例子：

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>

单行条件渲染是否可行？

Is single-line conditional rendering possible?

.net

blazor

.net-6.0