我是一个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备忘单)

其他回答

导入行应该是:

import React, { Component }  from 'react';

注意大写的R代表React。

对于那些仍然没有得到公认解决方案的人:

Add

import React from 'react'
import ReactDOM from 'react-dom'

在文件的顶部。

在使用react框架时,首先需要从react中导入react,并且在导入后始终保持react的首字母大写。

import React, {Component} from '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;

对我来说,我有这个问题,一旦我使用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'] }],
    ...
  },
}

我也有类似的问题。

在我在主组件中添加下面的代码后得到了修复:App.js 如果您有其他组件,请确保在这些文件中也导入react。

import React from "react";