# 泛型组件模式
泛型组件在保持可复用性的同时提供了类型安全。TypeScript 会从 prop 值中推断泛型类型参数，无需在调用处手动进行类型注解。
## 泛型表格组件
功能齐全的表格，支持类型化列、自定义渲染和排序。
typescript
type Column = {
key: keyof T;
header: string;
render?: (value: T[keyof T], item: T) => React.ReactNode;
sortable?: boolean;
};
type TableProps = {
data: T[];
columns: Column[];
keyExtractor: (item: T) => string | number;
onSort?: (key: keyof T, direction: 'asc' | 'desc') => void;
className?: string;
};
function Table({
data,
columns,
keyExtractor,
onSort,
className,
}: TableProps) {
const [sortKey, setSortKey] = React.useState(null);
const [sortDir, setSortDir] = React.useState('asc');
const handleSort = (key: keyof T) => {
const newDir = sortKey === key && sortDir === 'asc' ? 'desc' : 'asc';
setSortKey(key);
setSortDir(newDir);
onSort?.(key, newDir);
};
return (
{columns.map((col) => (
|
{col.sortable ? (
) : (
col.header
)}
|
))}
{data.map((item) => (
{columns.map((col) => (
|
{col.render
? col.render(item[col.key], item)
: String(item[col.key])}
|
))}
))}
);
}
用法：
typescript
type User = {
id: number;
name: string;
email: string;
role: 'admin' | 'user';
createdAt: Date;
};
function UserTable({ users }: { users: User[] }) {
const [sortedUsers, setSortedUsers] = React.useState(users);
const handleSort = (key: keyof User, direction: 'asc' | 'desc') => {
const sorted = [...users].sort((a, b) => {
if (a[key]
b[key]) return direction === 'asc' ? 1 : -1;
return 0;
});
setSorte 
粤公网安备44030002003366号