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

Question

我是 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”必须在范围内

原文由 Gopinath Kaliappan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

导入行应为：

 import React, { Component }  from 'react';

注意 React 的大写 R。

原文由 patrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

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（Next.js 备忘单）

原文由 GorvGoyl 发布，翻译遵循 CC BY-SA 4.0 许可协议