前端 - React 类组件报错：Parsing error: '>' expected.eslint 找不到名称“div”。ts(2304)？

Question

在编写一个类组件的时候：

import React from 'react'


export default class GroupComp extends React.Component {
...

  render() {
    return (
      <div className="collapsable-app">
        <div className="app-content" ref={this.refContainer} />
      </div>
    )
  }
}

有2个报错：
1、

Parsing error: '>' expected.eslint
找不到名称“div”。ts(2304)
type div = /*unresolved*/ any

2、

应为“>”。ts(1005)
找不到名称“className”。ts(2304)
any

请问为何会报错呢？
使用函数式组件定义不会。

===

我已经安装了：

pnpm install @types/react @types/react-dom --save-dev

Answer 1

这个问题通常与TypeScript的配置和/或ESLint的配置有关。从你的描述来看，有几个可能的原因和解决方案：

原因1：TypeScript配置问题

确保你的tsconfig.json文件配置正确，特别是jsx选项应该被设置为react或react-jsx（取决于你的TypeScript版本）。例如：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 或者 "react" 取决于你的TypeScript版本
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

原因2：ESLint配置问题

确保你的.eslintrc或eslintConfig在package.json中正确配置了React的插件和规则。特别是，你可能需要安装和配置eslint-plugin-react以及确保它支持你正在使用的JSX语法。

安装ESLint React插件

如果你还没有安装，可以通过npm或pnpm来安装：

pnpm install eslint-plugin-react --save-dev

更新.eslintrc或eslintConfig

确保你的ESLint配置文件包含了React插件，并且配置了适当的规则。例如：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "react"
  ],
  "rules": {
    // 你可以在这里覆盖或添加额外的规则
  }
}

原因3：文件扩展名

确保你的文件扩展名是.tsx而不是.ts，特别是当你的组件使用了JSX时。.tsx扩展名告诉TypeScript编译器这个文件包含JSX代码。

原因4：项目依赖

虽然你已经安装了@types/react和@types/react-dom，但确保它们与你的react和react-dom库版本兼容。有时候，类型定义可能滞后于库本身。

总结

• 确保tsconfig.json中的jsx选项正确。
• 确保安装了eslint-plugin-react并正确配置了ESLint。
• 确保文件扩展名是.tsx。
• 检查react和@types/react的版本兼容性。

按照这些步骤操作后，问题应该能得到解决。如果问题依旧，可能需要检查更详细的配置或查看是否有其他相关的错误或警告信息。