在JSX中使用'React'時，必須包含在範圍內 react/react-in-jsx-scope

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/react-in-jsx-scope

Answer 1

在.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速查表）

Answer 2

導入行應該是：

import React, { Component }  from 'react';

注意React的大寫R。