React组件Props类型推断：TypeScript泛型与映射类型实践

import React from 'react';

type Props<Row extends Record<string, any> & { key: string }> = {
  /**
   * 单元格渲染器，键名必须是Row类型中除'key'外的属性，值是一个渲染函数。
   */
  cellRenderer?: {
    [Key in keyof Omit<Row, 'key'>]?: (row: Row) => React.ReactNode;
  };
  /**
   * 列的渲染顺序，数组元素必须是Row类型中除'key'外的属性名。
   */
  columnOrder: Array<keyof Omit<Row, 'key'>>;
  /**
   * 列的定义，键名必须是Row类型中除'key'外的属性，值可以是字符串（列头）或React节点。
   */
  columns: {
    [Key in keyof Omit<Row, 'key'>]: string | React.ReactNode;
  };
  /**
   * 表格的行数据，一个Row类型对象的数组。
   */
  rows: Array<Row>;
};

export const Table = <Row extends Record<string, any> & { key: string }>({
  cellRenderer,
  columnOrder,
  columns,
  rows,
}: Props<Row>): React.ReactNode => {
  // 组件的实际渲染逻辑，这里仅作示意
  return (
    <div className="flow-root">
      <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        {/*
          实际的表格渲染逻辑将在这里实现。
          例如，可以根据 columnOrder 遍历列，
          根据 columns 定义列头，
          并使用 cellRenderer 渲染每个单元格内容。
        */}
        <table className="min-w-full divide-y divide-gray-300">
          <thead>
            <tr>
              {columnOrder.map((colKey) => (
                <th key={String(colKey)} scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
                  {columns[colKey]}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {rows.map((row) => (
              <tr key={row.key}>
                {columnOrder.map((colKey) => (
                  <td key={`${row.key}-${String(colKey)}`} className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
                    {cellRenderer?.[colKey] ? cellRenderer[colKey]?.(row) : (row as any)[colKey]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// 定义一个具体的数据行类型
interface User {
  key: string; // 必须包含key属性
  id: number;
  name: string;
  email: string;
  age: number;
}

const userData: User[] = [
  { key: '1', id: 1, name: 'Alice', email: 'alice@example.com', age: 30 },
  { key: '2', id: 2, name: 'Bob', email: 'bob@example.com', age: 24 },
  { key: '3', id: 3, name: 'Charlie', email: 'charlie@example.com', age: 35 },
];

const App = () => {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">用户列表</h1>
      <Table<User> // 明确指定Row类型为User，也可以让TypeScript自动推断
        rows={userData}
        columnOrder={['name', 'email', 'age']} // 只能是User中除'key'外的属性
        columns={{
          name: '姓名',
          email: '邮箱',
          age: '年龄',
          // id: '用户ID', // 如果不希望id列显示，这里可以不定义
        }}
        cellRenderer={{
          age: (row) => <span className={row.age > 30 ? 'text-red-500' : 'text-green-600'}>{row.age}</span>,
          email: (row) => <a href={`mailto:${row.email}`} className="text-blue-500 hover:underline">{row.email}</a>
        }}
      />

      {/* 错误示例：尝试传入不存在的列名，TypeScript会报错 */}
      {/*
      <Table<User>
        rows={userData}
        columnOrder={['name', 'invalid_prop']} // 报错：'invalid_prop' 不属于 'name' | 'email' | 'age' | 'id'
        columns={{
          name: '姓名',
          invalid_prop: '无效属性' // 报错
        }}
      />
      */}
    </div>
  );
};

export default App;