我是一个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'必须在作用域中
当前回答
如果你正在运行React 17+(在2022年，我假设你是)，你需要在你的.eslintrc中添加以下一行:
{
"extends": ["plugin:react/jsx-runtime"]
}
然后只在你的顶级文件中导入一次React，比如App.jsx——不需要在其他任何地方导入它，除非你需要一个像useEffect之类的api。
其他回答
我注意到的一件事是从“React”导入React;应该在那里，而不是import react， {Component} from 'react'; 我做过的其他事情是，
(1)添加以下行到index.js文件。
import React from 'react'
import ReactDOM from 'react-dom'
如果没有工作，添加这一行从“react-dom/client”导入ReactDOM;而不是从'react-dom'导入ReactDOM
(2)修改eslint配置文件的以下属性。
rules: {
"react/react-in-jsx-scope": "off",
}
但是从React 17开始，不需要添加import React from ' React '和next js
在我的例子中，我必须在src文件夹的index.js文件中包含这两行代码。
import React from 'react'
import ReactDOM from 'react-dom'
在你的情况下，这可能是不同的。 如果使用基于类的组件，则可能需要包含组件。
import React, { Component } from 'react';
或者，如果你正在使用eslint，你可以从上面的注释中得到一些解决方案。
知道更多
我也有类似的问题。
在我在主组件中添加下面的代码后得到了修复:App.js 如果您有其他组件，请确保在这些文件中也导入react。
import React from "react";
对我来说，我有这个问题，一旦我使用npm审计fix -force，所以它降级反应脚本到版本2，它迫使我安装eslint版本5，问题开始泛滥，为了解决这个问题，我更新了一次反应脚本，事情解决了。 还要确保你的eslint包含这些规则
module.exports = {
extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
...
// React scope no longer necessary with new JSX transform
'react/react-in-jsx-scope': 'off',
// Allow .js files to use JSX syntax
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
...
},
}
下面这行为我解决了这个问题。
/** @jsx jsx */
import {css, jsx} from "@emotion/react";
希望这对你有帮助。
