сохранение состояния аккордеона и расширенных строк таблицы

Question

Есть ли какой-либо способ в Ant Design для отслеживания состояния расширения отдельных строк таблицы и применения этого состояния, если страница обновляется или компонент перемонтируется (т. Е. При переходе между различными маршрутами в SPA?)

Также есть способ заставить расширение строк таблицы работать как аккордеон.Т.е. за один раз можно развернуть только одну строку?

На данный момент я просто исследую Ant-D, читаю документацию и играю с небольшими фрагментами кода.

Но я не могу найти документацию о том, как сделать выше (т.е. сохранить / восстановить состояние таблицы / аккордеона), поэтому я не знаю, что попробовать.Я, конечно, мог бы создавать нестандартные фрагменты, но тогда это не помогло бы получить хорошую структуру.

Надеясь на более элегантное решение.

Answer 1

Проверьте следующий пример, реквизиты, на которые вы должны ссылаться:

• onExpandedRowsChange
• onExpand
• expandedRowKeys

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>
  );
}