在编写一个类组件的时候：
极客观点
项目管理
HarmonyOS
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*/ any2、
应为“>”。ts(1005)
找不到名称“className”。ts(2304)
any请问为何会报错呢？
使用函数式组件定义不会。
===
我已经安装了：
pnpm install @types/react @types/react-dom --save-dev
AI BotBETA这个问题通常与TypeScript的配置和/或ESLint的配置有关。从你的描述来看，有几个可能的原因和解决方案：
确保你的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/**/*"]
}确保你的.eslintrc或eslintConfig在package.json中正确配置了React的插件和规则。特别是，你可能需要安装和配置eslint-plugin-react以及确保它支持你正在使用的JSX语法。
如果你还没有安装，可以通过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": {
// 你可以在这里覆盖或添加额外的规则
}
}确保你的文件扩展名是.tsx而不是.ts，特别是当你的组件使用了JSX时。.tsx扩展名告诉TypeScript编译器这个文件包含JSX代码。
虽然你已经安装了@types/react和@types/react-dom，但确保它们与你的react和react-dom库版本兼容。有时候，类型定义可能滞后于库本身。
tsconfig.json中的jsx选项正确。eslint-plugin-react并正确配置了ESLint。.tsx。react和@types/react的版本兼容性。按照这些步骤操作后，问题应该能得到解决。如果问题依旧，可能需要检查更详细的配置或查看是否有其他相关的错误或警告信息。
8 回答4.8k 阅读✓ 已解决
6 回答3.5k 阅读✓ 已解决
6 回答2.4k 阅读
5 回答6.4k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
3 回答2.6k 阅读✓ 已解决
因为你的文件后缀是ts 不是tsx