如何用TypeScript基于字符串数组动态校验React组件的Render Props？

可以通过泛型组件实现这个需求，利用TypeScript的泛型推断能力捕获renderPropNames的字符串字面量联合类型，进而约束renderProps的键名必须完全匹配。

步骤1：定义泛型Props类型 #

将组件的Props定义为泛型类型，用泛型参数T捕获renderPropNames的字符串字面量类型：

import React from 'react';

type ComponentProps<T extends string> = {
  renderPropNames: T[];
  // 约束renderProps的键必须是T的联合类型，且每个值都是返回JSX.Element的函数
  renderProps: Record<T, () => JSX.Element>;
};

步骤2：实现泛型组件 #

将组件定义为泛型组件，让TypeScript自动推断泛型参数T的类型：

const Component = <T extends string>(props: ComponentProps<T>) => {
  // 组件内部逻辑：遍历renderPropNames，调用对应的renderProps渲染内容
  return (
    <div className="render-props-container">
      {props.renderPropNames.map((propName) => (
        <div key={propName}>{props.renderProps[propName]()}</div>
      ))}
    </div>
  );
};

步骤3：使用组件（自动校验生效） #

当你传入renderPropNames的字面量数组时，TypeScript会自动推断出T的联合类型，并校验renderProps的键名是否完全匹配：

正确示例（无报错） #

<Component
  renderPropNames={["prop1", "prop2", "prop3"]}
  renderProps={{
    prop1: () => <div>Prop 1</div>,
    prop2: () => <div>Prop 2</div>,
    prop3: () => <div>Prop 3</div>,
  }}
/>

错误示例（TypeScript会报错） #

• 缺少prop3：TypeScript提示renderProps缺少必需的属性prop3

<Component
  renderPropNames={["prop1", "prop2", "prop3"]}
  renderProps={{
    prop1: () => <div>Prop 1</div>,
    prop2: () => <div>Prop 2</div>,
  }}
/>

• 多了额外键prop4：TypeScript提示renderProps包含未在T中定义的属性prop4

<Component
  renderPropNames={["prop1", "prop2"]}
  renderProps={{
    prop1: () => <div>Prop 1</div>,
    prop2: () => <div>Prop 2</div>,
    prop4: () => <div>Prop 4</div>,
  }}
/>

处理动态生成的renderPropNames #

如果renderPropNames是动态生成的变量，需要用as const断言让TypeScript保留其字面量类型，否则TypeScript会将其推断为string[]，无法进行精确校验：

// 用as const断言保留字面量类型
const dynamicPropNames = ["propA", "propB"] as const;

<Component
  renderPropNames={dynamicPropNames}
  renderProps={{
    propA: () => <div>Prop A</div>,
    propB: () => <div>Prop B</div>,
  }}
/>

原理说明 #

泛型参数T会自动捕获renderPropNames数组中所有字符串字面量的联合类型（比如"prop1" | "prop2" | "prop3"），然后通过Record<T, () => JSX.Element>约束renderProps必须包含所有T中的键，且不能有额外键，从而实现动态的键名校验，无需提前定义静态联合类型。

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