import React, { useEffect, useState } from 'react'; import { Button, Transfer } from 'antd'; import type { TransferDirection, TransferListProps } from 'antd/es/transfer'; interface RecordType { key: string; title: string; description: string; chosen: boolean; } const App: React.FC = () => { const [mockData, setMockData] = useState([]); const [targetKeys, setTargetKeys] = useState([]); const getMock = () => { const tempTargetKeys = []; const tempMockData = []; for (let i = 0; i < 20; i++) { const data = { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, chosen: i % 2 === 0, }; if (data.chosen) { tempTargetKeys.push(data.key); } tempMockData.push(data); } setMockData(tempMockData); setTargetKeys(tempTargetKeys); }; useEffect(() => { getMock(); }, []); const handleChange = (newTargetKeys: string[]) => { setTargetKeys(newTargetKeys); }; const renderFooter = ( _: TransferListProps, { direction, }: { direction: TransferDirection; }, ) => { if (direction === 'left') { return ( ); } return ( ); }; return ( `${item.title}-${item.description}`} footer={renderFooter} /> ); }; export default App;