切换Blazor中的表达式

Question

我先来回答这个问题，我已经有答案了。但我怀疑其他人也遇到了类似的情况，我想分享我的解决方案。

问题：如何在Balzor中使用switch表达式来渲染组件？

我有一个场景，其中有一个具有字符串属性的对象，我想根据字符串值呈现不同的按钮。使用switch语句，它看起来像这个

@switch(myObject.SomeStringValue)
{
case "StringValueOne": <ButtonComponent OnClick="@DoAThing"/> break;
case "StringValueTwo": <ButtonComponent OnClick="@DoTwoThing"/> break;
case "StringValueThree": <ButtonComponent OnClick="@DoThreeThing"/> break;
default: <ButtonComponent OnClick="@DoSomethingElse"/> break;
}

我的问题是，我想在每种情况下使用模式匹配来匹配多个字符串值。。。

case is "StringValueOne" or "AnotherMatchingValue": <ButtonComponent OnClick="@DoAThing"/> break;

基于C#文档，我找不到将switch语句和模式匹配一起使用的方法。

现在，总的来说，比起switch语句，我更喜欢switch表达式的语法。我希望能够在Blazor中使用switch表达式，以获得与上述switch语句类似的结果，该语句在剃刀文件中本地工作。如何使用switch表达式来实现相同的目标？

Answer 1

好吧，伙计们，这里有一个答案！

@(myObject.SomeStringValue switch
{
"StringValueOne" or "AnotherMatch" => (@<ButtonComponent OnClick="@DoAThing"/>),
"StringValueTwo" or "MatchTwo" => (@<ButtonComponent OnClick="@DoTwoThing"/>),
"StringValueThree" or "MatchThree" => (@<ButtonComponent OnClick="@DoThreeThing"/>),
_ => (@<ButtonComponent OnClick="@DoSomethingElse"/>)
})

如果你找到了另一种方法，或者这对你不起作用，请告诉我。

Answer 2

对于简单的字符串，您也可以有多个case语句，如下所示：

@switch(myObject.SomeStringValue)
{
case "StringValueOne":
case "AnotherMatchingValue":
<ButtonComponent OnClick="@DoAThing"/>
break;
case "StringValueTwo": <ButtonComponent OnClick="@DoTwoThing"/> break;
case "StringValueThree": <ButtonComponent OnClick="@DoThreeThing"/> break;
default: <ButtonComponent OnClick="@DoSomethingElse"/> break;
}

StringValueOne和AnotherMatchingValue都将导致<ButtonComponent OnClick="@DoAThing"/>

Answer 3

您的代码是"昂贵"；，您重新创建组件只是为了更改其中一个参数OnClick。用大锤敲坚果！

这里有一些代码演示了如何"；开关"；基于一些输入的CCD_ 5。您可以将任何与其签名匹配的delegate分配给OnClick。Action是我们可以用于此目的的打包委托。

由于你还没有展示ButtonComponent，我制作了一个非常简单的：

<button class="btn btn-primary" @onclick=this.ButtonClicked>Click Me</button>
@code {
[Parameter] public EventCallback Clicked { get; set; }
private void ButtonClicked()
=> Clicked.InvokeAsync();
}

这里有一个测试页面来演示实际操作：

@page "/"
<PageTitle>Index</PageTitle>
<ButtonComponent Clicked=this.buttonHandler />
<div class="m-3 text-right text-end">
<button class="btn btn-danger" @onclick=this.ChangeInt>Change Delegate</button>
</div>
<div class="bg-dark text-white p-2 m-2">
@switcher - @this.message
</div>
@code {
private int switcher = 0;
private string message = "Nothing Clicked";
private Action buttonHandler => switcher switch
{
1 => Do1,
2 => Do2,
3 => Do3,
_ => Do0
};
private void ChangeInt()
=> switcher = switcher >= 3 ? 0 : ++switcher;
private void Do0()
=> message = $"Switch0 clicked";
private void Do1()
=> message = $"Switch1 clicked";
private void Do2()
=> message = $"Switch2 clicked";
private void Do3()
=> message = $"Switch3 clicked";
}