如何正确编写TypeScript React泛型函数组件的<T>语法？

你的代码核心问题是在TSX文件中，<T>会被编译器误解析为JSX标签的起始，导致语法错误。以下是两种正确的写法：

写法1：添加逗号消除泛型歧义 #

在泛型参数后添加逗号，明确告知编译器这是TypeScript泛型而非JSX标签：

import React, { ReactNode } from 'react';

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
}

const List = <T,>(props: ListProps<T>) => {
  return (
    <div>
      {props.items.map((item, index) => (
        {/* 必须添加key属性，避免React渲染警告 */}
        <React.Fragment key={index}>{props.renderItem(item)}</React.Fragment>
      ))}
    </div>
  );
};

写法2：基于React.FC定义泛型组件 #

通过React.FC（FunctionComponent）的泛型形式来声明组件，也能避免语法冲突：

import React, { ReactNode, FC } from 'react';

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
}

const List: FC<ListProps<unknown>> = <T>(props: ListProps<T>) => {
  return (
    <div>
      {props.items.map((item, index) => (
        <React.Fragment key={index}>{props.renderItem(item)}</React.Fragment>
      ))}
    </div>
  );
};

使用示例 #

泛型T会自动根据传入的items和renderItem的参数类型推导，无需手动指定：

// 定义列表项类型
interface User {
  id: number;
  name: string;
}

const App = () => {
  const userList: User[] = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];

  return (
    <List
      items={userList}
      renderItem={(user) => <div key={user.id}>{user.name}</div>}
    />
  );
};

额外注意 #

• 务必给map生成的元素添加唯一key属性，这是React的强制要求，可避免渲染性能问题和警告。
• 如果需要对泛型T做类型约束，可以写成<T extends { id: number }>，确保列表项包含id等必要属性。

内容的提问来源于stack exchange，提问作者Mykolai Skydan