一次只展开一个表格行 Ant Design React答案

【问题标题】：Expand only one table row at a time Ant Design React一次只展开一个表格行 Ant Design React
【发布时间】：2022-01-23 20:09:38
【问题描述】：

我无法做到这一点，我附上了下面的代码，请让我知道这里有什么问题？

在添加 expandedRowKeys 和 onExpand 之前，它正在扩展所有表格行，但在实现它之后，它甚至没有打开一行

<Table
    rowkey="id"
    size="small"
    columns={groupsPackageColumns}
    dataSource={roomPackages}
    className="taglist-table"
    expandable={{
        expandedRowRender: (record) => (
            <Table
                rowKey="id"
                columns={nestedTagsColumn}
                dataSource={record.tags}
                className="ant-table-container"
            />
        ),                    
        expandedRowKeys: activeExpRow,
        onExpand: (expanded, record) => {
            const keys = [];
            if (expanded) {
               keys.push(record.id); 
            }
            setActiveExpRow(keys);
        },
    }}
                        
/>

【问题讨论】：

标签： javascript html css reactjs antd

【解决方案1】：

我不确定您的roomPackages 的数据结构。但它应该包含key 属性。并推送record.key而不是record.id 如果dataSource 数据不包含key 属性，则会出现以下错误。

所以，我们需要修改数据，因为它包含key 属性。我制作了可工作的 Codesandbox。

https://codesandbox.io/s/expandable-row-antd-4-17-4-forked-41rd3?file=/index.js

【讨论】：

我的对象中有 id 而不是密钥
我更新了我的沙盒和描述。