Javascript 保存手风琴和扩展表行的状态

Ant Design中是否有任何方法可以捕获特定表行是否已展开的状态，并在页面刷新或组件重新装载时应用该状态（即在SPA上的不同路由之间导航时）

还有一种方法可以使表行的扩展像手风琴一样工作。即一次只能扩展一行

此时，我正在研究Ant-D，阅读文档并处理小代码段

但我找不到关于如何执行上述操作（即保存/恢复桌子/手风琴的状态）的文档，因此我不知道该尝试什么。我当然可以构建定制的零碎部分，但这样做就无法实现拥有一个好框架的目的

---

希望有一个更优雅的解决方案。

检查下一个示例，您应该参考的道具有：

• onExpandedRowsChange

• onExpand

• expandedRowKeys

从“antd”导入{表格、排版、选择、无线电}；
const expandedRowRender=记录=>(
{record.key}
);
导出默认函数App（）{
const[expandedRow，setExpandedRow]=useState（0）；
常数[radioValue，setRadioValue]=使用状态（“手风琴”）；
const[currentRow，setCurrentRow]=useState（[]）；
返回(
setRadioValue（e.target.value）}
>
手风琴
rowState
{radioValue===='手风琴'(
setExpandedRow（isExpanded？record.key:未定义）
}
expandedRowRender={expandedRowRender}
expandedRowKeys={[expandedRow]}
/>
) : (
{currentRow}
)}
);
}

---

请发布您尝试过的任何代码。我相信这是可能的，但是AntD组件可以以多种方式组装。您可以将自己的自定义行与

组件
道具一起使用，并跟踪呈现表的任何组件中的扩展状态。您想要的答案是什么？是的，两者都可以。你说的是哪个框架\库？React、Vue、Angular？根据标签和文本，特别是“ant design”，我正在寻找如何在ant-d文档中找不到任何内容，但可能我还没有看到其中的位置。完美的是，我错过了expandedRowKeys和OneExpandedRowChange之间的互连
import { Table, Typography, Select, Radio } from 'antd';

const expandedRowRender = record => (
  <Typography.Text code>{record.key}</Typography.Text>
);

export default function App() {
  const [expandedRow, setExpandedRow] = useState(0);
  const [radioValue, setRadioValue] = useState('accordion');

  const [currentRow, setCurrentRow] = useState([]);
  return (
    <FlexBox>
      <Radio.Group
        style={{ width: 200 }}
        value={radioValue}
        onChange={e => setRadioValue(e.target.value)}
      >
        <Radio value="accordion">Accordion</Radio>
        <Radio value="rowState">rowState</Radio>
      </Radio.Group>
      {radioValue === 'accordion' ? (
        <Table
          dataSource={dataSource}
          columns={columns}
          onExpand={(isExpanded, record) =>
            setExpandedRow(isExpanded ? record.key : undefined)
          }
          expandedRowRender={expandedRowRender}
          expandedRowKeys={[expandedRow]}
        />
      ) : (
        <>
          <Typography.Title>{currentRow}</Typography.Title>
          <Table
            dataSource={dataSource}
            columns={columns}
            expandedRowRender={expandedRowRender}
            onExpandedRowsChange={setCurrentRow}
          />
        </>
      )}
    </FlexBox>
  );
}