相关文章推荐
心软的香菜  ·  DTS Bundle Generator 使用教程·  2 月前    · 
痴情的铁板烧  ·  前端開發環境 + React + TS - ...·  2 月前    · 
高大的蟠桃  ·  田柾国 李美珠 - 百度·  1 年前    · 
发呆的作业本  ·  什么是彻底的意识形态批判——重新理解马克思对 ...·  1 年前    · 
稳重的红豆  ·  “史上最贵药”一针超1300万元将落地中国: ...·  1 年前    · 
文质彬彬的蟠桃  ·  Pornhub真凉了,LSP现在都看这个网站 ...·  2 年前    · 
高大的豌豆  ·  do到饭糊第一集 - 百度·  2 年前    · 
Code  ›  react.js - react 函数组件使用typescript的泛型问题 -
泛型 react typescript
https://segmentfault.com/q/1010000019536238
焦虑的书签
2 年前
segmentfault segmentfault
注册登录
问答 博客 标签 活动
发现
✓ 使用“Bing”搜本站 使用“Google”搜本站 使用“百度”搜本站 站内搜索
注册登录
  1. 首页
  2. 问答
  3. Microsoft
  4. 问答详情

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

头像
腹中有书气自华
2k 5 30 49
发布于
2019-06-20
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 (
      <Table columns={columns} dataSource={datasource} />}
export default GlobalTable这里
Microsoft react.js typescript
阅读 13.8k
3 个回答
得票 最新
头像
荒山
1.6k 1 2 8
发布于
2019-07-15
更新于
2019-07-15

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

头像
南漂一卒
42 6
发布于
2022-04-11
更新于
2022-04-11

我因为同时需要 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';
头像
李若炎
1.4k 6 26 40
发布于
2019-06-20
更新于
2019-06-20

可以不用 FC

interface GlobalTableProp<T> {
  columns: ColumnProps<T>[]
  datasource: T[]
const GlobalTable = <T>(props: GlobalTableProp<T>) => {
  return (
 
推荐文章
心软的香菜  ·  DTS Bundle Generator 使用教程
2 月前
痴情的铁板烧  ·  前端開發環境 + React + TS - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
2 月前
高大的蟠桃  ·  田柾国 李美珠 - 百度
1 年前
发呆的作业本  ·  什么是彻底的意识形态批判——重新理解马克思对施蒂纳的批判-马克思主义学院
1 年前
稳重的红豆  ·  “史上最贵药”一针超1300万元将落地中国:治疗SMA只需一次静脉注射 - 21经济网
1 年前
文质彬彬的蟠桃  ·  Pornhub真凉了,LSP现在都看这个网站|网红|基哥|玩偶|lsp_网易订阅
2 年前
高大的豌豆  ·  do到饭糊第一集 - 百度
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号