如何编写可渲染任意传入组件的通用MudTab？

原有的MudTab封装仅支持传入ChildContent，要实现更灵活的面板数量控制与任意组件渲染，可通过新增动态面板列表参数优化组件，同时保留原有用法的兼容性。

改进后的通用MudTab组件代码 #

<MudTabs Elevation="1" Rounded="true" PanelClass="pa-6">
    <!-- 兼容原有自定义子内容用法 -->
    @ChildContent
    <!-- 动态渲染批量传入的面板 -->
    @foreach (var panel in TabPanels)
    {
        <MudTabPanel Text="@panel.Title">
            @panel.Content
        </MudTabPanel>
    }
</MudTabs>

@code {
    /// <summary>
    /// 自定义子内容（支持手动传入MudTabPanel）
    /// </summary>
    [Parameter] public RenderFragment? ChildContent { get; set; }

    /// <summary>
    /// 动态面板列表，用于批量配置面板标题与内容
    /// </summary>
    [Parameter] public List<TabPanelItem> TabPanels { get; set; } = new();

    /// <summary>
    /// 面板项模型，封装标题与内容片段
    /// </summary>
    public class TabPanelItem
    {
        public string Title { get; set; } = string.Empty;
        public RenderFragment Content { get; set; } = default!;
    }
}

两种使用方式示例 #

方式1：直接传入ChildContent（固定面板场景） #

适合面板结构固定的场景，直接在组件内部编写MudTabPanel并嵌入任意组件：

<YourCustomMudTab>
    <!-- 第一个面板：数据网格组件 -->
    <MudTabPanel Text="数据网格">
        <MudServerDataGrid T="YourDataModel" Items="@yourDataSource">
            <PropertyColumn Property="x => x.Id" Title="ID" />
            <PropertyColumn Property="x => x.Name" Title="名称" />
        </MudServerDataGrid>
    </MudTabPanel>

    <!-- 第二个面板：混合表单组件与自定义Razor组件 -->
    <MudTabPanel Text="表单集合">
        <div class="d-flex flex-column gap-4">
            <MudCheckBox Label="同意服务协议" />
            <MudSelect T="string" Label="选择分类" />
            <MudRadioGroup T="string" Label="单选选项">
                <MudRadio Value="OptionA" Label="选项A" />
                <MudRadio Value="OptionB" Label="选项B" />
            </MudRadioGroup>
            <!-- 嵌入自定义Razor组件 -->
            <Razor1 />
            <Razor2 />
        </div>
    </MudTabPanel>

    <!-- 第三个面板：单独的自定义Razor组件 -->
    <MudTabPanel Text="自定义组件">
        <RazorComponent />
    </MudTabPanel>
</YourCustomMudTab>

@code {
    // 模拟数据源
    private List<YourDataModel> yourDataSource = new();
}

方式2：动态生成面板（可变数量/内容场景） #

适合面板数量或内容需根据业务逻辑动态调整的场景，通过TabPanels参数批量传入配置：

<YourCustomMudTab TabPanels="@GetDynamicTabPanels()" />

@code {
    private List<YourCustomMudTab.TabPanelItem> GetDynamicTabPanels()
    {
        return new List<YourCustomMudTab.TabPanelItem>
        {
            new()
            {
                Title = "数据网格",
                Content = @<MudServerDataGrid T="YourDataModel" Items="@yourDataSource">
                    <PropertyColumn Property="x => x.Id" Title="ID" />
                    <PropertyColumn Property="x => x.Name" Title="名称" />
                </MudServerDataGrid>
            },
            new()
            {
                Title = "表单集合",
                Content = @<div class="d-flex flex-column gap-4">
                    <MudCheckBox Label="同意服务协议" />
                    <MudSelect T="string" Label="选择分类" />
                    <MudRadioGroup T="string" Label="单选选项">
                        <MudRadio Value="OptionA" Label="选项A" />
                        <MudRadio Value="OptionB" Label="选项B" />
                    </MudRadioGroup>
                    <Razor1 />
                    <Razor2 />
                </div>
            },
            new()
            {
                Title = "自定义组件",
                Content = @<RazorComponent />
            }
        };
    }

    // 模拟数据源
    private List<YourDataModel> yourDataSource = new();
}

内容的提问来源于stack exchange，提问作者Dev