如何为React复合组件定义泛型实现cell自动推断data类型

问题原因 #

你当前的类型定义存在两个核心问题：

1. Column组件未声明泛型参数，导致其cell属性的参数无法关联到Table的data类型，最终被推断为unknown。
2. 直接用React.ReactElement<ColumnProps<T>>[]约束children不够灵活，且React的children实际类型是ReactNode，包含多种可能的元素类型，这种写法会限制组件的使用场景。

解决方案 #

通过给Column组件添加泛型参数，并优化Table的类型约束，让TypeScript自动从data推断类型并传递给子Column：

1. 定义泛型化的Column组件与Props #

import React from 'react';

// 定义Column的Props，泛型T对应Table数据项的类型
type ColumnProps<T> = {
  header: string;
  // cell支持返回React节点，比仅返回string更灵活
  cell: (item: T) => React.ReactNode;
};

// 给Column组件添加泛型T，让它能接收并使用数据项类型
const Column = <T,>(props: ColumnProps<T>) => {
  // 这里仅做类型占位，实际渲染逻辑由Table组件处理
  return null;
};

2. 定义带类型约束的Table组件与Props #

// Table的Props，泛型T从data自动推断
type TableProps<T> = {
  data: T[];
  // 允许children是单个或多个Column组件，兼容ReactNode的灵活场景
  children: React.ReactElement<ColumnProps<T>> | React.ReactElement<ColumnProps<T>>[];
};

// Table组件使用泛型T，自动从data推断类型
const Table = <T,>(props: TableProps<T>) => {
  return (
    <table>
      <thead>
        <tr>
          {React.Children.map(props.children, (col) => (
            <th key={col.props.header}>{col.props.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {props.data.map((item, index) => (
          <tr key={index}>
            {React.Children.map(props.children, (col) => (
              <td key={col.props.header}>{col.props.cell(item)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

3. 使用示例与类型校验 #

当你传入符合要求的data时，Column的cell参数会自动推断出正确的类型：

const data = [
  { date: "12-12-2012", count: 12 }
];

// 正常运行，cell参数c的类型自动推断为{ date: string; count: number }
<Table data={data}>
  <Column cell={(c) => c.date} header="Date" />
  <Column cell={(c) => c.count} header="Count" />
</Table>

如果data缺少字段（比如移除count），TypeScript会直接在Column的cell={(c) => c.count}处报错，提示count属性不存在，符合你的需求。

额外优化（可选） #

如果需要支持更复杂的children结构（比如嵌套在Fragment中），可以将TableProps的children改为React.ReactNode，并在组件内部通过类型守卫确保子元素是Column组件：

type TableProps<T> = {
  data: T[];
  children: React.ReactNode;
};

const Table = <T,>(props: TableProps<T>) => {
  // 过滤并校验子元素是否为Column组件
  const columns = React.Children.toArray(props.children).filter(
    (child): child is React.ReactElement<ColumnProps<T>> => 
      React.isValidElement(child) && 'header' in child.props && 'cell' in child.props
  );

  // 后续渲染逻辑使用columns数组
  return (
    // ... 同之前的渲染代码
  );
};

内容的提问来源于stack exchange，提问作者apieceofbart