Javascript 如何将带有通用道具的React类组件转换为Typescript中的函数组件？

编写接收通用道具的React组件。在类组件方式中，很容易：

interface TableProps<D> {
  data: D
}

class Table<D> extends React.Component<TableProps<D>> { }

interface TableProps{
数据：D
}
类表扩展了React.Component{}

但是，在功能组件方面，我不知道：

// can't figure out a way to define high order generic.
const Table2: <D extends {}> React.SFC<TableProps<D>> = ({ data }) => { }

//无法找到定义高阶泛型的方法。
常量表2:React.SFC=（{data}）=>{}

---

如何纠正它？

我很确定您所追求的是这样的，因为我很确定SFC只是呈现给一个返回JSX的函数，也可以重写它

const foo = (props: IGenericProps<number>) => {
    return (
        <div>

        </div>
    )
}

constfoo=（道具：IGenericProps）=>{
返回(
)
}

问题在于，您不能声明一个类型的常量，而留下一个自由的泛型参数（例如

D

）。可以使用函数类型，但不能使用接口/类类型。解决方法是创建一个返回组件函数的函数：

interface TableProps<D> {
  data: D
}
let Table2: <D>()=>React.SFC<TableProps<D>> = function<D>(){
  return ({data}) => {
    return <div></div>;
  }
}
//Usage
let Table2ForNumbers = Table2<number>();
let d = <Table2ForNumbers data={0}></Table2ForNumbers>;

interface TableProps{
数据：D
}
让表2:（）=>React.SFC=function（）{
返回（{data}）=>{
返回；
}
}
//用法
设Table2ForNumbers=Table2（）；
设d=；

---

注意此解决方案允许您使用

Table2

作为类型化功能组件的工厂，因此您可以对特定类型使用

Table2

的类型安全实例化，例如上面示例中的

number

。

您不必显式地将其键入

React.FC

，即可获得预期的工作类型。（编写

扩展{}

似乎相当普遍，但我认为

扩展了任何

的内容，更好地传达了实际意义，也同样有效。）

---

隐马尔可夫模型。。。try:

consttable2=（{data}:TableProps）：React.Component=>{}

@5ar我不懂你的代码。这里似乎有一些拼写错误？您的解决方案可以工作，但在使用时会带来一些不便。对于ppl来说，使用普通javascript是不友好的。这不是不真实的，它是一个额外的函数，只是为了TS编译器的利益。您可以在JS中使用表2的任何设置（您可以对任何类型使用

Table2ForNumbers

，因为JS不关心，您可能对JS消费者使用

Table2ForAny

），但遗憾的是JSer不能直接将表2用作组件。他们必须首先实例化一个组件，或者导入一个实例化的组件。TSer和JSer之间的使用差异可能会迫使维护人员编写两份关于其使用的文档，并导致ppl很难删除TS类型。@5ar在注释中有一个解决方案，看起来与TS/JS的工作方式相同，但问题是，在TS中，它可能不像任何数据值那样通用do@AndyO首选将函数类型设置为

React.FC

，以确保函数类型正确。这将向道具添加

子项

，并向函数本身添加其他属性。你完全可以跳过注释，你是对的。我更多地是在以下背景下阅读：我想使用此注释，如何使函数通用。省略

React.FC

也是一个很好的解决方案，尤其是对于通用函数

const Table = <D extends any>({ data }: TableProps<D>): ReactElement => <div>{data}</div>;

type Dummy = typeof Table extends React.FC<any> ? true : false;