一次只扩展一个表行 Ant Design React

Question

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

在添加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);
        },
    }}
                        
/>

Answer 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