如何在react / typescript中设置料表动态列

interface TableData {
  id: number;
  name: string;
  age: number;
  // 其他属性...
}

const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  // 其他列...
];

import { Table } from 'antd';

const MyTable: React.FC<{ data: TableData[] }> = ({ data }) => {
  return (
    <Table columns={columns} dataSource={data} />
  );
};

const [dynamicColumns, setDynamicColumns] = useState(columns);

// 在某个事件处理函数中更新列配置
const handleColumnUpdate = () => {
  const updatedColumns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'name' },
    { title: '性别', dataIndex: 'gender' },
    // 其他更新后的列...
  ];
  setDynamicColumns(updatedColumns);
};

// 在表格组件中使用动态列配置
<Table columns={dynamicColumns} dataSource={data} />