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的类型安全实例化，例如{上面示例中的{1}}。

Answer 2

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

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

它与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>
    )
}

如何将带有泛型道具的React类组件转换为Typescript中的Function Component？

3 个答案: