在Blazor/.NET版Ant Design中自定义Collapse图标及isActive与折叠Key问题

1. isActive的含义 #

isActive是Collapse组件传给ExpandIcon自定义回调的参数，用来标记当前折叠面板的状态：

• 值为true时，说明当前面板处于展开状态
• 值为false时，说明当前面板处于折叠状态
  你代码里就是靠这个参数切换加号/减号图标，让用户一眼能看出面板状态。

2. 如何获取isActive的值 #

这个参数不需要你主动去“获取”，它是Collapse组件内部管理的状态，会自动传递给你写的ExpandIcon回调函数。只要在回调的参数里解构出isActive，直接用就行，就像你代码里写的({ isActive }) => ...那样。

如果要在组件其他逻辑里用到这个状态，不能直接从ExpandIcon里拿，得通过Collapse提供的onChange回调来同步外部状态，具体看下面的代码示例。

3. 代码示例及获取折叠/展开项Key的实现思路 #

代码示例（以React+Ant Design的Collapse组件为例） #

import { useState } from 'react';
import { Collapse, Icon } from 'antd';

const { Panel } = Collapse;

const MyCollapse = () => {
  // 用useState维护当前展开的面板Key集合
  const [activeKeys, setActiveKeys] = useState([]);

  // 监听折叠状态变化，拿到当前展开的所有面板Key
  const handleCollapseChange = (keys) => {
    setActiveKeys(keys);
    // 这里可以直接处理当前展开的Key
    console.log('当前展开的面板Key：', keys);
    // 判断单个面板是否展开，比如检查Key为'1'的面板
    const isPanel1Open = keys.includes('1');
    console.log('面板1是否展开：', isPanel1Open);
  };

  return (
    <Collapse
      activeKeys={activeKeys}
      onChange={handleCollapseChange}
      // 自定义展开/折叠图标
      ExpandIcon={({ isActive }) => (
        isActive ? <Icon type="minus" theme="outline" /> : <Icon type="plus" theme="outline" />
      )}
    >
      <Panel header="面板1" key="1">
        面板1的内容区域
      </Panel>
      <Panel header="面板2" key="2">
        面板2的内容区域
      </Panel>
      <Panel header="面板3" key="3">
        面板3的内容区域
      </Panel>
    </Collapse>
  );
};

export default MyCollapse;

实现思路 #

1. 状态绑定：用useState定义activeKeys状态，绑定到Collapse的activeKeys属性，把组件内部状态同步到外部，方便后续使用。
2. 获取项Key：借助Collapse的onChange回调，当面板展开或折叠时，组件会把当前所有展开的面板Key组成的数组传给这个回调，直接拿到就能用。
3. 单个面板状态判断：如果要知道某个特定Key的面板是否展开，只需要检查activeKeys数组里有没有这个Key就行，用includes方法就能快速判断。

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