单行条件渲染是不是可行？

Posted 2023-03-31

【中文标题】单行条件渲染是不是可行？

【英文标题】：Is single-line conditional rendering possible?单行条件渲染是否可行？

【发布时间】：2021-10-22 01:40:28

【问题描述】：

如何像在 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>

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

【问题讨论】：

有人可能会说这在 React 和 Blazor 中都是丑陋的代码

你想做什么？实际问题是什么？ Blazor 代码正在呈现片段，而不是返回值。每个分支都等价于...，而不是组件内部的表达式。

此外，React 的方式是使用具有不同状态的组件，而不是三元运算符来显示不同的表示。甚至还有一个Suspense 组件

【参考方案1】：

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

太棒了，对吧？

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

【讨论】：

“太棒了，对吧？” - 对不起，但是 - 不））“单行”问题是使用三元运算符，它可以根据条件返回 ComponentBase 或 string。

为什么使用三元或 if 对您很重要。 . .还有吗？

@AntonKomyshan 这个答案有效并且确实回答了你的问题。如果你不喜欢它，你将不得不提供一个解释。 I want to use the ternary operator 还不够。事实上，三元运算符在这里甚至都不适用。代码正在渲染片段，而不是返回值。

【参考方案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>

【讨论】：

@AntonKomyshan 将其归零。有关组件的更多信息，请参阅shauncurtis.github.io/articles/Blazor-Components.html。 Benny1973 - 我尝试将有用的东西添加到我的个人 github 站点。

@MrCakaShaunCurtis 谢谢！