我是一个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 v17，你可以在eslint配置文件中禁用该规则:
"rules": {
...
"react/react-in-jsx-scope": "off"
...
}
其他回答
对我来说，我有这个问题，一旦我使用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'] }],
...
},
}
这是由于从'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;
每当我们使用JSX在React中创建自定义组件时，它都会在Babel的帮助下转换为向后兼容的JS代码。 因为JSX编译成React。createElement, React库也必须始终在作用域中。
例子:
这个自定义组件:
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
转化为:
React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')
^^^^^
由于转换后的代码需要React库，我们需要将其导入作用域。
React Docs参考
修复:导入React
import React from 'react';
// or
import * as React from 'react';
选择一个，这取决于用户!
注意: 从React 17+开始，我们就不用做这样的导入了，但是为了安全起见，最好还是添加导入，因为ESLint会产生错误!
你可以在ESLint配置文件(.eslintrc.json)中禁用该规则来忽略这些错误:
"rules": {
"react/react-in-jsx-scope": "off"
}
对于那些仍然没有得到公认解决方案的人:
Add
import React from 'react'
import ReactDOM from 'react-dom'
在文件的顶部。
在我的例子中，我必须在src文件夹的index.js文件中包含这两行代码。
import React from 'react'
import ReactDOM from 'react-dom'
在你的情况下，这可能是不同的。 如果使用基于类的组件，则可能需要包含组件。
import React, { Component } from 'react';
或者，如果你正在使用eslint，你可以从上面的注释中得到一些解决方案。
知道更多
