如何在React+TypeScript中通过父组件Props类型限制子组件Props值

要实现父组件的Props类型限制子组件Props的取值，核心是利用TypeScript的keyof操作符获取父组件Props的键名集合，再通过泛型或直接指定类型的方式关联父子组件，具体有两种实现方式：

1. 通用泛型方案（推荐） #

这种方式适用于父组件可能接收多种Props类型的场景，灵活性更高：

type User = { name: string; age: number; };

// 子组件通过泛型T约束field只能是传入类型的键
const Child = <T extends object>(props: { field: keyof T }) => {
  return <div>{props.field}</div>;
};

// 父组件用泛型接收自身Props类型，并传递给子组件
const Parent = <T extends object>(props: T) => {
  return (
    <div>
      <Child<T> field="name" /> {/* ✅ 合法，User包含name字段 */}
      <Child<T> field="age" /> {/* ✅ 合法，User包含age字段 */}
      <Child<T> field="firstName" /> {/* ❌ TypeScript编译报错："firstName"不属于keyof User */}
    </div>
  );
};

// 使用时传入符合User类型的props，自动约束子组件
const App = () => {
  return <Parent name="Alice" age={25} />;
};

2. 固定类型方案 #

如果父组件的Props类型是固定的（比如始终是User），可以直接给子组件指定约束：

type User = { name: string; age: number; };

// 直接约束field为User的键名
const Child = (props: { field: keyof User }) => {
  return <div>{props.field}</div>;
};

const Parent = (props: User) => {
  return (
    <div>
      <Child field="name" /> {/* ✅ 合法 */}
      <Child field="age" /> {/* ✅ 合法 */}
      <Child field="firstName" /> {/* ❌ 编译报错 */}
    </div>
  );
};

原理说明 #

• keyof T会提取类型T的所有键名，形成一个联合类型（比如keyof User就是"name" | "age"）
• 泛型方案中，父组件的Props类型T会被自动推导，然后传递给子组件，让子组件的field只能取T的键名
• 两种方案都能在编译阶段就拦截非法的field取值，避免运行时错误

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