如何重用 blazor 组件的代码段？

Question

我不知道它是否可能，但我有一个 switch 语句允许基于值的不同组件。但是我可以看到我想使用这个 switch 语句，blazor 中是否有重用它的选项？

这是我想的代码

@page "/"

@foreach (var widget in _components)
{
    switch (widget)
    {
        case WidgetA:
            <WidgetA/>
            break;
        case WidgetB:
            <WidgetB/>
            break;
    }
}

但是我想多次使用它，有没有办法将它存储在一个函数中我尝试了以下方法，但它没有加载

    <div class="row">
        <div class="col-md-6">
            @foreach (var widget in _components21)
            {
                switche(widget);
            }
        </div>
        <div class="col-md-6">
            @foreach (var widget in _components22)
            {
                switche(widget);
            }
        </div>
    </div>

    private string switche(IComponent widget)
    {
        string html = "";
        switch (widget)
        {
            case WidgetA:
                html = "<WidgetA/>";
                break;
            case <WidgetB/>:
                html = "<WidgetB/>";
                break;
        }
        return html;
    }

Answer 1

您可以创建一个包含两个小部件的父组件，然后在父组件的 属性 中，您可以有一个名为 WidgetType 的参数，它定义了您实际想要使用的小部件。

父控件：

@if(WidgetType == "A"){
  <WidgetA>
}else{
  <WidgetB>
}
@code{
    [Parameter] public string WidgetType {get; set;}
}

然后你会在你的for循环中使用它

@foreach (var widget in _components)
{
    <ParentWidget @WidgetType=widget.WidgetType>
}