如何在代码中使用 Blazor 组件？

Question

我正在尝试完成类似于下面代码的操作，但我似乎无法弄清楚如何去做。

@page "/"

<div>@test</div>
@code {
[Parameter]
public string Animal { get; set; }

private BaseComponent test { get; set; }

protected override async Task OnInitializedAsync()
{
    switch (Animal)
    {
        case "Cat": test = <Cat>Fluffy</Cat>; break;
        case "Dog": test = <Dog>Woff</Dog>; break;
        default: test = <p>None</p>
    }
}

我还希望能够将组件放入字典中，例如new Dictionary<string, BaseComponent> { {"cat", <Cat>test</Cat> }}

有任何想法吗？

Answer 1

使用 RenderFragments 是可能的：

private Dictionary<string, RenderFragment> switcher 
  = new Dictionary<string, RenderFragment>(StringComparer.CurrentCultureIgnoreCase)
{
    {  "cat" , __builder => { <Cat> It's a Cat </Cat> } },
    {  "dog" , __builder => { <Dog> It's a Dog </Dog> } },

};

然后在@code之外，

@switcher["Cat"]

---

但是，如果这是最好的解决方案，很大程度上取决于确切的用例，以及使用<Animal>标签需要多大的灵活性。

例如，您可以用<ShowAnimal Animal="Cat" />组件替换上面的内容，并在标记部分中使用（大）switch 语句来实现它。

Answer 2

渲染片段字典：

@_content

@code {

    [Parameter]
    public string Animal { get; set; }

    RenderFragment _content => Animal switch
    {
        "Cat" => @:@{ <Cat>Fluffy</Cat> } 
,
        "Dog" => @:@{ <Dog>Woff</Dog> } 
,
           _  => @:@{ <p>None</p> } 
    };

}

笔记：

由于解析错误，开关逗号当前必须位于下一行。