如何通过函数参数动态访问React组件类型并推断Props

你需要用泛型函数来捕获传入的具体布局key类型，让TypeScript能在静态调用时精准推断对应组件的Props类型，解决索引类型报错的问题。

正确实现代码 #

import type { FC } from 'react';

// 示例组件（替换为你实际的组件定义）
const SectionLayout: FC<{ sectionId: string }> = ({ sectionId }) => <div>{sectionId}</div>;
const Header: FC<{ title: string }> = ({ title }) => <h1>{title}</h1>;
const Title: FC<{ text: string }> = ({ text }) => <h2>{text}</h2>;
const Description: FC<{ content: string }> = ({ content }) => <p>{content}</p>;
const Goal: FC<{ target: string }> = ({ target }) => <div>目标：{target}</div>;

const activeFormDesign = {
    fields: {},
    elements: {},
    groups: {},
    layouts: {
        section: SectionLayout,
        header: Header,
        title: Title,
        description: Description,
        goal: Goal,
    },
};

// 泛型版本的获取函数
export function getLayoutTemplate<K extends keyof typeof activeFormDesign.layouts>(
    type: K
): typeof activeFormDesign.layouts[K] {
    return activeFormDesign.layouts[type];
}

// 调用示例
const GoalComponent = getLayoutTemplate('goal');
// 此时GoalComponent会被正确推断为FC<{ target: string }>，传参时会有类型提示和校验
<GoalComponent target="完成用户调研" />;

const HeaderComponent = getLayoutTemplate('header');
<HeaderComponent title="表单设计器" />;

为什么原来的写法不行？ #

你之前的函数返回类型中，type是keyof typeof activeFormDesign.layouts这个联合类型，TypeScript无法在函数定义阶段确定具体的索引值，因此报错"type cannot be used as an index type"。

而泛型K会在函数调用时绑定为你传入的具体字面量类型（比如'goal'），此时typeof activeFormDesign.layouts[K]就能精准指向该key对应的组件类型，包括它的Props定义，自然就能实现正确的类型推断。

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