Blazor组件仅显示RenderFragment参数，按钮不显示问题求助

核心问题排查 #

你的组件按钮不显示、结构异常，主要由以下几个问题导致：

1. 按钮文字未绑定参数 #

组件中按钮显示的是硬编码的GroupTitle字符串，而非传递的GroupTitle参数，若页面背景与文字颜色接近，可能看起来像按钮未显示。

2. （可选）条件渲染逻辑不符合常规需求 #

当前逻辑是初始显示内容，点击按钮隐藏，如果你的需求是初始隐藏内容，点击显示，则逻辑写反。

3. 未处理RenderFragment参数的可空性 #

在启用nullable引用类型的项目中，未标记CollapsibleContent为可空可能导致潜在的编译或渲染异常。

4. 样式缺少单位导致布局异常 #

使用组件时的style="min-width: 100;"缺少单位，可能引发布局错乱，间接导致按钮被遮挡或不显示。

修复步骤 #

修复组件代码 #

<div class="">
    <!-- 绑定GroupTitle参数，显示正确的标题 -->
    <button class="btn btn-link w-100" @onclick="Toggle">
        <b>@GroupTitle</b>
    </button>
    <!-- 调整条件逻辑：初始隐藏内容，点击显示（根据需求可选） -->
    @if (ShowContent)
    {
        <div>
            @CollapsibleContent
        </div>
    }
</div>

@code {
    [Parameter] 
    public string? GroupTitle { get; set; }
    <!-- 标记RenderFragment为可空，适配nullable模式 -->
    [Parameter] 
    public RenderFragment? CollapsibleContent { get; set; }

    public bool ShowContent { get; set; } = false;

    public void Toggle() {
        ShowContent = !ShowContent;
    }
}

修复组件使用代码 #

<div class="d-flex flex-row">
    <!-- 补充min-width的单位 -->
    <div class="d-flex flex-column" style="min-width: 100px;">
        @foreach(var pair in Menu)
        {
            <CollapsibleMenu GroupTitle="@pair.Key">
                <CollapsibleContent>
                    <ul class="list-group">
                        @foreach(DataRow row in pair.Value)
                        {
                            <li class="list-group-item">
                                @(row["SortOrder"])
                            </li>
                        }
                    </ul>
                </CollapsibleContent>
            </CollapsibleMenu> 
        }
    </div>
</div>

额外检查 #

确保在使用CollapsibleMenu的页面或全局布局中，添加了组件所在命名空间的引用：

@using YourProjectNamespace.Components

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