如何扩展Blazor组件添加自定义IsVisible属性以控制渲染？

我需要动态控制组件是否渲染到页面，虽然用@if代码块能实现，但觉得给现有组件添加IsVisible属性会更简洁。背景是用户需要选择可见字段，我会提供对话框让用户选择，偏好设置存入数据库，希望通过扩展组件来控制可见性。目前已经创建了包装组件，但感觉不够优雅，效果和@if差不多。

方案1：基于ComponentBase的通用基类扩展 #

创建一个继承自ComponentBase的基类，内置IsVisible属性并控制渲染逻辑，所有需要可见性控制的组件都继承这个基类：

public class VisibleComponentBase : ComponentBase
{
    [Parameter]
    public bool IsVisible { get; set; } = true;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        if (IsVisible)
        {
            base.BuildRenderTree(builder);
        }
    }
}

以MudTextField为例，自定义扩展组件：

@inherits VisibleComponentBase
@inherits MudTextField<string>

@{
    base.BuildRenderTree(__builder);
}

使用时直接通过IsVisible控制：

<MyMudTextField IsVisible="@IsNameFieldVisible" Label="姓名" @bind-Value="UserName" />

方案2：通用可见性包装组件 #

做一个通用的包装组件，通过ChildContent包裹任意组件，无需修改原有组件结构：

@if (IsVisible)
{
    @ChildContent
}

@code {
    [Parameter]
    public bool IsVisible { get; set; } = true;

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

使用示例：

<VisibleWrapper IsVisible="@IsEmailFieldVisible">
    <MudTextField Label="邮箱" @bind-Value="UserEmail" />
</VisibleWrapper>

这个方案复用性极强，所有组件都能直接套用来控制可见性，比单独包装每个组件更简洁。

方案3：RenderFragment扩展方法 #

通过扩展方法给任意组件的渲染片段添加可见性控制，无需额外组件：

public static class ComponentVisibilityExtensions
{
    public static RenderFragment Visible(this RenderFragment component, bool isVisible)
    {
        return builder =>
        {
            if (isVisible)
            {
                component(builder);
            }
        };
    }
}

使用时的写法：

@(() => <MudTextField Label="手机号" @bind-Value="UserPhone" />).Visible(IsPhoneFieldVisible)

这种方式语法紧凑，适合零散组件的可见性控制，不需要额外的包装标签。

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