React结合Ant Design实现Table可展开行无法收起及互斥展开求助

实现逻辑说明 #

通过受控模式管理Table的展开状态，仅存储当前处于展开态的行唯一标识，即可同时满足点击图标切换展开/收起、点击其他行自动收起上一行的需求。

完整实现代码 #

import React, { useState } from 'react';
import { Table } from 'antd';

// 表格列配置可按实际需求调整
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
  },
];

// 测试数据源，需确保每条数据有唯一key字段
const dataSource = [
  {
    key: '1',
    name: '测试数据1',
    desc: '这是第一行的描述内容',
    detail: '第一行展开的额外内容',
  },
  {
    key: '2',
    name: '测试数据2',
    desc: '这是第二行的描述内容',
    detail: '第二行展开的额外内容',
  },
  {
    key: '3',
    name: '测试数据3',
    desc: '这是第三行的描述内容',
    detail: '第三行展开的额外内容',
  },
];

const App = () => {
  // 存储当前展开的行key，null表示无展开行
  const [expandedRowKey, setExpandedRowKey] = useState(null);

  // 展开/收起事件处理
  const handleExpand = (isExpanding, record) => {
    if (isExpanding) {
      // 触发展开时更新状态为当前行key，自动覆盖之前的展开行实现排他展开
      setExpandedRowKey(record.key);
    } else {
      // 触发收起时清空状态
      setExpandedRowKey(null);
    }
  };

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      // 展开行内容渲染可按实际需求调整
      expandedRowRender={(record) => <p>{record.detail}</p>}
      // 受控绑定展开行key列表
      expandedRowKeys={expandedRowKey ? [expandedRowKey] : []}
      // 绑定展开事件回调
      onExpand={handleExpand}
    />
  );
};

export default App;

功能验证 #

上述代码实现效果完全匹配需求：

• 点击行前+图标：对应行展开，其余已展开行自动收起
• 点击已展开行前-图标：当前行直接收起

内容的提问来源于stack exchange，提问作者Mujtaba Hussain Bhat