在ant表中以展开的形式显示动态添加的行

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John Brown', age: 32 },
  { key: '2', name: 'Jim Green', age: 42 },
  { key: '3', name: 'Joe Black', age: 32 },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];

const expandedRowRender = (record) => {
  return (
    <p style={{ margin: 0 }}>{record.name} is {record.age} years old.</p>
  );
};

const App = () => {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      expandable={{ expandedRowRender }}
    />
  );
};

export default App;