Blazor(.NET 8)中遍历未知数量组件实现批量折叠/展开

直接上 Sc东西Queen 预测_HTake？你�设计上可行方案：通过收集组件引用的方式，把每个动态生成的CollapsibleCard实例存到集合里，之后遍历集合调用组件自带的折叠/展开方法就行。

第一步：收集动态组件的引用 #

首先在页面的代码块里定义一个列表，用来存卡片组件的引用：

private List<CollapsibleCard> _allCards = new();

然后在@foreach循环生成卡片的时候，用@ref把每个组件实例加入列表：

@foreach (var item in _listOfItems)
{
    <CollapsibleCard 
        @ref="@(card => { if(card != null && !_allCards.Contains(card)) _allCards.Add(card); })"
        Title="@item.CardTitle">
        <!-- 这里放基于item的内容 -->
    </CollapsibleCard>
}

这样每个卡片渲染完成后，都会自动加入_allCards列表，完全适配数量未知的场景。

第二步：实现批量操作按钮 #

添加一个按钮，点击时遍历列表里的所有卡片，调用它们的折叠/展开方法：

<button class="btn btn-primary" @onclick="ToggleAllCards">
    @_isAllExpanded ? "折叠全部" : "展开全部"
</button>

对应的代码逻辑：

private bool _isAllExpanded = true;

private void ToggleAllCards()
{
    _isAllExpanded = !_isAllExpanded;
    foreach (var card in _allCards)
    {
        if (_isAllExpanded)
        {
            card.Expand(); // 替换成你组件里的展开方法名
        }
        else
        {
            card.Collapse(); // 替换成你组件里的折叠方法名
        }
    }
}

注意事项 #

• 确保你的CollapsibleCard组件里的Expand和Collapse方法内部调用了StateHasChanged()，否则状态变更不会同步到UI上。
• 如果_listOfItems会动态更新（比如筛选、分页），记得在列表更新后清空_allCards，避免集合中留存已销毁的组件实例，比如在重新加载数据后执行_allCards.Clear();。

为什么不推荐参数控制方案？ #

你之前尝试的参数控制方案存在硬伤：Blazor的组件参数遵循单向数据流原则，组件内部修改参数会破坏这个规则，因此编译器会发出警告。而从外部修改参数时，只有参数值真正发生变化才会触发组件渲染，比如连续两次设置同一布尔值，第二次不会触发渲染，还得手动调用StateHasChanged()，反而不如直接操作组件实例高效直接。

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