如何在代码中使用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> }} 的字典中，有什么好的想法吗？

- user3713080

---

查找RenderFragments：https://visualstudiomagazine.com/articles/2019/07/19/how-to-dynamically-build.aspx - Pedro Silva

为什么不在你的HTML中将每个组件都包装在显示或隐藏的条件中呢？ - Crowcoder

因为我将有数百个这些组件，猫和狗只是一个例子。 - user3713080

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" /> 组件替换上面的组件，并在标记部分中使用（大）开关语句来实现它。

- H H

---

请注意，您只能在.razor文件中执行此操作。您不能在代码后面（.razor.cs）执行此操作。 - Vencovsky

是的，这显然取决于 Razor 编译器。在部分类中，您将不得不使用 builder.OpenComponent(...) 这种代码。在某些情况下可能更可取。 - H H

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> } 
    };

}

注意：

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

- Brian Parker