如何在TypeScript中让React组件Props类型与传入值动态匹配？

要实现自动校验items与传入组件的Props匹配，需要利用TypeScript泛型和React内置的类型工具，让List组件动态推导传入组件的Props类型，从而约束items数组的结构。

修改后的List组件 #

import React from 'react';

// 泛型组件，T代表传入组件的Props类型
interface ListProps<T> {
  items: T[];
  // ComponentType<T> 表示接受任意以T为Props的React组件（函数/类组件都支持）
  component: React.ComponentType<T>;
}

export function List<T>(props: ListProps<T>) {
  return (
    <>
      {props.items.map((item, index) => (
        // 建议添加key属性，符合React规范
        <props.component key={index} {...item} />
      ))}
    </>
  );
}

原理说明 #

• 通过泛型T，List组件可以从传入的component参数中自动推导其Props类型，无需手动绑定特定组件的接口。
• React.ComponentType<T>是React内置的类型，涵盖了所有接受T作为Props的组件类型（包括函数组件、类组件以及memo包装后的组件）。
• items: T[]强制要求数组中的每个元素都必须完全匹配组件的Props结构，一旦有字段缺失或类型不匹配，TypeScript会立即在编辑器中抛出错误。

使用示例 #

以你的Card组件为例，当传入存在字段缺失的items时，TypeScript会自动报错：

import { List, Card } from './components';

// 错误示例：第一个元素缺少title字段，TypeScript会提示类型不匹配
const invalidItems = [
  { body: '缺失title的内容' }, // ❌ 类型错误：缺少title属性
  { title: '正常标题', body: '正常内容' }
];

// 正确示例：所有元素都符合Card的Props要求
const validItems = [
  { title: '标题1', body: '内容1' },
  { title: '标题2', body: '内容2' }
];

// 使用List组件
function App() {
  return (
    <div>
      {/* 这里会触发TypeScript错误 */}
      <List items={invalidItems} component={Card} />
      {/* 正常编译 */}
      <List items={validItems} component={Card} />
    </div>
  );
}

适配其他组件 #

这种写法完全通用，比如你要适配MyLink或MyImage组件，只需直接传入即可，TypeScript会自动校验items的类型：

// 示例：MyLink组件
interface MyLinkProps {
  href: string;
  text: string;
}

function MyLink(props: MyLinkProps) {
  return <a href={props.href}>{props.text}</a>;
}

// 使用List渲染MyLink，items必须符合MyLinkProps
const linkItems = [
  { href: '/home', text: '首页' },
  { href: '/about', text: '关于' }
];

<List items={linkItems} component={MyLink} />

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