如何使用 blazor 组件重用代码段？答案

【问题标题】：How to reuse code segment with blazor component?如何使用 blazor 组件重用代码段？
【发布时间】：2021-12-14 16:08:14
【问题描述】：

我不知道它是否可能，但我有一个 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;
    }

【问题讨论】：

标签： c# asp.net asp.net-core blazor blazor-server-side

【解决方案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>
}

【讨论】：