Reactjs Typescript：区分不同输入道具的通用组件

我有一个有两个成员的枚举

enum Step {
  ONE = "StepOne",
  TWO = "StepTwo"
}

每一个都被分配给一个属性，

步骤

，在一个有区别的联合中

type Props =
  | { type: Step.TWO; headline: string }
  | { type: Step.ONE; headline: string[] };

有一个通用组件，它接受联合体中任一形状的支柱，并从“componentMap”对象返回匹配的组件

const组件=（道具：提取）=>{
const compMap={StepOne，step2}；
//这是可行的，但我不想强制转换Comp我不明白为什么您选择将
Component
的调用签名设置为generic；输入类型为
Props
，输出类型为
JSX.Element
。由于
t
参数只出现一次，因此与调用方没有任何有用的区别tween
（props:Extract）=>…
和
（props:props）=>…

您可能希望
组件
的实现会发现额外的类型信息有用，但不幸的是它没有。没有任何东西可以阻止
T
成为完整的联合
步骤
，因此
props
可以是
Extract
类型，也就是说，只是
props
。因此
T
不是b这也有助于实现。（有关泛型类型参数的可收缩性的开放特性请求，请参阅和。）

因此，从现在开始，我将切换到非泛型函数签名
（props:props）=>JSX.Element


我认为您能够避免错误的唯一方法是显式地引导编译器遍历不同的可能的
Props
案例

type UnifyFunctions<F extends (...args: any) => any> =
    (...x: Parameters<F>) => ReturnType<F>;

const Component = (props: Props) => {
    const compMap = { StepOne, StepTwo };
    const Comp = compMap[props.step] as 
      UnifyFunctions<typeof compMap[keyof typeof compMap]>;
    return <Comp {...props} />;
}

假装
Comp
对这两种
props
中的任何一种都很满意，因此
{…props}
被接受；至少比
任何
都不安全


可以从“/componets”导入*作为compMap，这有助于防止施法，不是吗。@斯宾塞·波普我敢打赌这个答案可能会有所帮助you@captain-yossarian看起来不错，谢谢！如果没有
回调，它似乎无法工作，对吗？我想jcalz的回答是，这不可能像我以前那样“我想写的是正确的。@斯宾塞·波普，是的，回调有助于推断类型。jcalz的答案很好
type UnifyFunctions<F extends (...args: any) => any> =
    (...x: Parameters<F>) => ReturnType<F>;

const Component = (props: Props) => {
    const compMap = { StepOne, StepTwo };
    const Comp = compMap[props.step] as 
      UnifyFunctions<typeof compMap[keyof typeof compMap]>;
    return <Comp {...props} />;
}