react 函数组件使用typescript的泛型问题

Question

import React, {FC} from 'react'
import {Table} from 'antd'
import {ColumnProps} from 'antd/lib/table'
interface GlobalTableProp<T> {
  columns: ColumnProps<T>[]
  datasource: T[]
}
// 这个地方的T怎么办 该怎么写
const GlobalTable: FC<GlobalTableProp<T>> = ({columns, datasource}) => {
  return (
    <div>
      <Table columns={columns} dataSource={datasource} />}
    </div>
  )
}
export default GlobalTable这里

Answer 1

关于React配合Typescript，推荐阅读这篇文章React组件设计总结-类型检查篇，里面包含了函数式组件泛型和其他常见用法

Answer 2

我因为同时需要 Props、泛型、FunctionComponent 组件类型，所以遇到和楼主同样的问题，目前暂时这样解决：

import React, { FC } from 'react';

export interface Base {
    id: number | string;
}

export interface TableProps<T extends Base> {
    list: T[]
}

export const Table = <T extends Base>({ list }: TableProps<T>) => (
    <table>
        {list.map(({ id }) => (
            <tr key={id}></tr>
        ))}
    </table>
);

// 断言箭头函数为 FC，否则此处无法提示函数组件的 React 专用属性
(Table as FC).displayName = 'Table';

Answer 3

可以不用 FC

interface GlobalTableProp<T> {
  columns: ColumnProps<T>[]
  datasource: T[]
}

const GlobalTable = <T>(props: GlobalTableProp<T>) => {
  return (
    <div>
      <Table columns={columns} dataSource={datasource} />}
    </div>
  )
}