React TSX中用class替代className的类型错误解决方法咨询

方法一：修改tsconfig.json配置 #

1. 打开项目根目录的tsconfig.json文件
2. 在compilerOptions中完成以下配置：
   • 设置"jsx": "react-jsx"（React 17+推荐的新JSX转换模式，支持直接使用class属性）
   • 确保lib数组包含"dom"（提供DOM类型定义）
   • 开启"allowSyntheticDefaultImports": true（适配新JSX转换的默认导入逻辑）

示例配置片段：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "react-jsx",
    "lib": ["dom", "ES2020"],
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "moduleResolution": "node"
  }
}

方法二：扩展React类型定义（方法一不生效时使用） #

如果修改tsconfig后仍有报错，可通过扩展React的HTML属性类型强制允许class：

1. 在项目src目录下创建global.d.ts文件
2. 添加以下代码：

import 'react';

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    class?: string;
  }
}

注意事项 #

• 不要尝试将TSX转为HTML文件解决问题，TSX需要经过TypeScript编译处理，直接转HTML无法适配React组件逻辑。
• 配置完成后重启TypeScript语言服务或编辑器，确保配置生效。

内容的提问来源于stack exchange，提问作者Ale Calabro