我是一名 Angular 开发人员，并且是 React 的新手，这是一个简单的 React 组件，但不起作用
import react , { Component} from 'react';
import { render } from 'react-dom';
class TechView extends Component {
constructor(props){
super(props);
this.state = {
name:'Gopinath'
}
}
render(){
return(
<span>hello Tech View</span>
);
}
}
export default TechView;
错误： 使用 JSX react/react-in-jsx-scope 时，“React”必须在范围内
导入行应该是：
import React, { Component } from 'react';
注意 React 的大写 R。
将以下设置添加到.eslintrc.js/.eslintrc.json以忽略这些错误：
rules: {
// suppress errors for missing 'import React' in files
"react/react-in-jsx-scope": "off",
// allow jsx syntax in js files (for next.js project)
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
}
为什么？
如果您正在使用，NEXT.js那么您不需要React在文件顶部导入，nextjs 会为您执行此操作。
对于那些仍然没有得到公认的解决方案的人：
添加
import React from 'react'
import ReactDOM from 'react-dom'
在文件的顶部。
如果您使用的是 React v17，则可以安全地禁用 eslint 配置文件中的规则：
"rules": {
...
"react/react-in-jsx-scope": "off"
...
}
import React, { Component } from 'react';
这是拼写错误，您需要输入React而不是react。