如何定义需包含指定Props且允许额外Props的传入组件

你想要定义一个基础的Table属性集合，要求传入的组件必须包含这些基础属性，同时允许组件添加自己的额外属性——本质上是需要让组件的Props类型成为基础TableProps的超集（即包含所有基础属性，同时可扩展）。

我们可以通过「基础类型定义 + 泛型约束/交叉类型」来实现这个需求，下面分两种常见场景给出具体实现：

1. 定义可扩展的组件Props类型 #

首先先把基础的Table属性抽成独立的类型（用interface或type都可以，这里用interface更直观）：

// 基础Table属性，所有表格组件必须包含
export interface BaseTableProps<T> {
  contents: T[];
  loadContents: () => Promise<T[]>;
}

接下来，当你需要定义带额外属性的表格组件时，直接让组件的Props继承这个基础类型即可：

// 假设你的业务类型是Attendance
type Attendance = {
  id: number;
  name: string;
  status: 'present' | 'absent';
};

// 自定义表格Props：继承基础属性 + 添加额外属性
interface AttendanceTableProps extends BaseTableProps<Attendance> {
  onChangeMark: (val: string) => void;
}

// 实现你的表格组件
const AttendanceTable: React.FC<AttendanceTableProps> = (props) => {
  // 可以直接访问基础属性：props.contents、props.loadContents
  // 也能访问自定义属性：props.onChangeMark
  return (
    <table>
      {/* 组件渲染逻辑 */}
    </table>
  );
};

2. 定义接受这类组件的父组件Props #

如果你需要在父组件中接受任意符合「包含基础Table属性+自定义属性」的组件，可以用泛型来约束组件的Props类型：

// 父组件的Props定义：用泛型T约束业务类型，P约束组件的额外属性
interface PageProps<T, P> {
  // 要求传入的组件，其Props必须包含BaseTableProps<T>，同时可以有P中的额外属性
  tableComponent: React.ComponentType<BaseTableProps<T> & P>;
  // 传递给表格组件的额外属性
  tableExtraProps: P;
}

// 使用父组件的示例
const AttendancePage: React.FC<PageProps<Attendance, { onChangeMark: (val: string) => void }>> = ({
  tableComponent: Table,
  tableExtraProps
}) => {
  const [contents, setContents] = useState<Attendance[]>([]);

  const loadContents = async () => {
    // 模拟接口请求
    const data = await fetch('/api/attendance');
    const result = await data.json();
    setContents(result);
    return result;
  };

  return (
    <div>
      {/* 传递基础属性 + 额外属性给表格组件 */}
      <Table contents={contents} loadContents={loadContents} {...tableExtraProps} />
    </div>
  );
};

你之前直接定义TableProps<T>为固定类型，它只能匹配刚好只有这两个属性的组件Props；而我们需要的是「至少包含这两个属性」的超集类型，所以必须通过继承、交叉类型或者泛型约束来实现这种灵活性。

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