如何在打字稿中将generc定义为FC组件？

【问题标题】：How to define generc to FC component in typescript?如何在打字稿中将generc定义为FC组件？
【发布时间】：2021-10-29 12:24:16
【问题描述】：

将类型传递给接口道具泛型的语法是什么？（猫必须是 FC 类型）

interface CatProps<T> {
  value: T
}

const Cat: FC<CatProps<T>> = () => {
  return <h1>Hello World!</h1>
}

const cat = <Cat<number> />

【问题讨论】：

请avoid images of code 在您的问题描述中提供一个minimal reproducible example 作为预先格式化的文本块。
试试const Cat = <T extends any>(props: CatProps<T>) => <h1>Hello World!</h1>
@Alex Chashin 但这不是 FC

标签： reactjs typescript generics

【解决方案1】：

这是一个完整的例子（基于@Alex Chashin 的评论）：

interface CatProps<T> {
  value: T;
}

const Cat = <T extends any>({value}: CatProps<T>) => <h1>Hello {value}!</h1>

const cat = Cat({value: 'world'});

或者如果你想传递一个数字：

const cat = Cat({value: 11});

【讨论】：

但在你的例子中 Cat 它不是 FC
不是，但它可以分配给一个人，这才是最重要的。不能使用FC 类型键入它，因为您需要将类型参数附加到函数本身，并且不能在函数外部使用T，您可以在其中放置FC