我是一个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而不是React。
其他回答
在使用react框架时，首先需要从react中导入react，并且在导入后始终保持react的首字母大写。
import React, {Component} from '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;
如图所示，通过在package.json中添加插件g——fix来删除lint错误并添加自动修复
我也有类似的问题。
在我在主组件中添加下面的代码后得到了修复:App.js 如果您有其他组件，请确保在这些文件中也导入react。
import React from "react";
如果你正在运行React 17+(在2022年，我假设你是)，你需要在你的.eslintrc中添加以下一行:
{
"extends": ["plugin:react/jsx-runtime"]
}
然后只在你的顶级文件中导入一次React，比如App.jsx——不需要在其他任何地方导入它，除非你需要一个像useEffect之类的api。
在你的eslint配置文件中添加"plugin:react/jsx-runtime"到extends，参考react-in-jsx-scope
