我是一个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'必须在作用域中
当前回答
将以下设置添加到.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会为你做这件事。
参考： https://gourav.io/blog/nextjs-cheatsheet （下一页.js备忘单）
其他回答
将以下设置添加到.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会为你做这件事。
参考： https://gourav.io/blog/nextjs-cheatsheet （下一页.js备忘单）
将react-scripts升级到最新版本解决了我的问题。
我使用的是react-scripts 0.9.5版本，并将其升级到5.0.1。
我也有类似的问题。
在我在主组件中添加下面的代码后得到了修复:App.js 如果您有其他组件，请确保在这些文件中也导入react。
import React from "react";
如图所示，通过在package.json中添加插件g——fix来删除lint错误并添加自动修复
import React, { Component } from 'react';
这是一个拼写错误，你需要输入React而不是React。
