React必须在范围内使用JSX react/react-in-jsx范围？

Question

我是一个角度开发人员和新的反应，这是简单的反应组件，但不工作

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作用域中使用JSX React/React时，“React”必须在作用域中

Answer 1

对于仍未获得公认解决方案的用户：

添加

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

在文件的顶部。

Answer 2

将以下设置添加到。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

Answer 3

导入行应为：

import React, { Component }  from 'react';

注意React的大写字母R。