我是一个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'必须在作用域中
当前回答
下面这行为我解决了这个问题。
/** @jsx jsx */
import {css, jsx} from "@emotion/react";
希望这对你有帮助。
其他回答
如果你想为所有使用jsx语法的文件自动包含import React from ' React '，请安装React -require babel插件:
npm install babel-plugin-react-require --save-dev
在.babelrc中添加react-require。这个插件应该在transform-es2015-modules-commonjs插件之前定义，因为它使用ES2015模块语法将React导入作用域。
{
"plugins": [
"react-require"
]
}
来源:https://www.npmjs.com/package/babel-plugin-react-require
如果你正在运行React 17+(在2022年，我假设你是)，你需要在你的.eslintrc中添加以下一行:
{
"extends": ["plugin:react/jsx-runtime"]
}
然后只在你的顶级文件中导入一次React，比如App.jsx——不需要在其他任何地方导入它，除非你需要一个像useEffect之类的api。
将以下设置添加到.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'导入错误的模块react而导致的错误，您试试这个如何: 1日
import React , { Component} from 'react';
或者你也可以试试这个:
import React from 'react';
import { render } from 'react-dom';
class TechView extends React.Component {
constructor(props){
super(props);
this.state = {
name:'Gopinath',
}
}
render(){
return(
<span>hello Tech View</span>
);
}
}
export default TechView;
这个错误非常直接，你导入了react而不是react。
