'Reagieren' muss im Gültigkeitsbereich sein, wenn JSX React / React-In-JSX-Scope verwendet wird.

129

Ich bin ein Angular-Entwickler und neu in React. Dies ist eine einfache React-Komponente, die jedoch nicht funktioniert

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;

Fehler: 'React' muss im Gültigkeitsbereich sein, wenn JSX react / react-in-jsx-scope verwendet wird

Gopinath Kaliappan
quelle

Antworten:

250

Die Importzeile sollte sein:

import React, { Component }  from 'react';

Beachten Sie den Großbuchstaben R für React.

Patrick
quelle
3
wie man es vermeidet. Ich meine, wenn ich eine zustandslose Funktion erstelle, ist sie in Nextjs nicht erforderlich
Muhaimin CS
1
@MuhaiminCS ändert die Regel in Ihrer eslintrc Datei
patrick
24

Für diejenigen, die immer noch nicht die akzeptierte Lösung erhalten:

Hinzufügen

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

am Anfang der Datei.

Ankit Pandey
quelle
12

Fügen Sie unter Einstellung .eslintrc.js/ .eslintrc.jsondiese Fehler zu ignorieren:

  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
  }

Warum? Wenn Sie verwenden, müssen NEXT.jsSie nicht Reactoben in Dateien importieren , nextjs erledigt dies für Sie.

JerryGoyal
quelle
NextJs Benutzer hier, danke dafür. Wenn Sie die Regel hinzufügen, "react/react-in-jsx-scope": "off"wird der Fehler behoben. Was bewirkt das Hinzufügen globals? Vielen Dank!
DeBraid
10
import React, { Component } from 'react';

Dies ist ein Rechtschreibfehler, den Sie Reactanstelle von eingeben müssen react.

kallayya Hiremath
quelle
Diese genaue Antwort wurde bereits als akzeptierte Antwort angegeben.
Dylan Maxey