如何识别展开的MudExpansionPanel并实现子组件延迟渲染？

一、延迟渲染的直接方案 #

核心思路是通过绑定每个面板的展开状态，仅当面板展开时才渲染高成本组件，避免初始渲染所有组件。

1. 在组件中维护每个Agent的展开状态：

// 存储每个Agent的面板展开状态，key为AgentId
private Dictionary<int, bool> _panelExpandedStates = new();

protected override void OnInitialized()
{
    // 初始化所有面板为折叠状态
    foreach (var agent in _liveAgents)
    {
        _panelExpandedStates[agent.Id] = false;
    }
}

2. 修改前端模板，绑定展开状态并条件渲染：

<MudExpansionPanels>
    @foreach (var liveAgent in _liveAgents)
    {
        <MudExpansionPanel Text=@liveAgent.Name 
                          @bind-IsExpanded="@_panelExpandedStates[liveAgent.Id]">
            <!-- 仅当面板展开时才渲染LiveAgentSummary -->
            @if (_panelExpandedStates[liveAgent.Id])
            {
                <LiveAgentSummary AgentId=@liveAgent.Id />
            }
        </MudExpansionPanel>
    }
</MudExpansionPanels>

这个方案无需依赖组件引用，就能实现延迟渲染，直接解决初始渲染性能问题，和官方异步加载数据示例的思路一致——仅在需要时加载/渲染内容。

二、获取组件引用并关联AgentId #

如果需要在事件中直接操作面板组件（比如访问内置状态），可以通过组件引用集合关联每个Agent和对应的面板：

1. 定义存储引用的集合：

// 关联AgentId和对应的面板组件
private Dictionary<int, MudExpansionPanel> _agentPanelMap = new();

2. 在循环中绑定组件引用和展开事件：

<MudExpansionPanels>
    @foreach (var liveAgent in _liveAgents)
    {
        <MudExpansionPanel Text=@liveAgent.Name 
                          @ref="@(() => _agentPanelMap[liveAgent.Id] = context)"
                          IsExpandedChanged="@((expanded) => OnPanelToggled(liveAgent.Id, expanded))">
            @if (_panelExpandedStates.ContainsKey(liveAgent.Id) && _panelExpandedStates[liveAgent.Id])
            {
                <LiveAgentSummary AgentId=@liveAgent.Id />
            }
        </MudExpansionPanel>
    }
</MudExpansionPanels>

3. 实现事件处理方法，可直接访问面板组件：

private void OnPanelToggled(int agentId, bool isExpanded)
{
    _panelExpandedStates[agentId] = isExpanded;
    
    // 通过AgentId获取对应面板组件，访问其内置属性或方法
    if (_agentPanelMap.TryGetValue(agentId, out var panel))
    {
        // 示例：获取面板当前的展开状态、标题文本等
        var currentState = panel.IsExpanded;
        var panelTitle = panel.Text;
        // 执行其他组件操作
    }
}

注意：@ref="@(() => ...)" 是Blazor 6及以上版本支持的语法，用于在循环中正确捕获每个组件的引用，避免循环变量捕获问题。

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