如何在代码中使用 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 语句实现它。