我是一个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'导入错误的模块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;
将以下设置添加到.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备忘单)
对我来说,我有这个问题,一旦我使用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'] }],
...
},
}