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

Question

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

interface TableProps<D> {
  data: D
}

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

但是，以功能组件的方式，我不知道：

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

如何纠正？

Answer 1

问题是您不能声明类型的常量并留下自由的泛型参数（例如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>;

注意：此解决方案可让您使用Table2的一个工厂类型的功能部件，这样你就可以拥有的类型安全实例Table2为特定的类型，如number在上面的例子。

Answer 2

您不必显式地将其键入为React.FC即可获得可以正常工作的类型。 （写extends {}似乎很普遍，但是我认为， extends any更好地传达实际含义，并且同样有效。）

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

它与React.FC兼容的React.FC可以通过以下类型评估为true来看出：

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

Answer 3

可以肯定的是，您追求的是这样的东西，因为我可以肯定，SFC只是将其渲染为返回JSX的函数，也可以重写它。

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

        </div>
    )
}