'React' deve essere nell'ambito quando si utilizza JSX react / react-in-jsx-scope?


129

Sono uno sviluppatore angolare e sono nuovo in React, questo è un semplice componente di reazione ma non funziona

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;

Errore: "React" deve essere nell'ambito quando si utilizza JSX react / react-in-jsx-scope

Risposte:


250

La riga di importazione dovrebbe essere:

import React, { Component }  from 'react';

Nota la R maiuscola per React.


3
come evitarlo. Voglio dire, quando creo una funzione senza stato, in Nextjs non la richiede
Muhaimin CS

1
@MuhaiminCS cambia la regola nel tuo file eslintrc
patrick

24

Per coloro che ancora non ottengono la soluzione accettata:

Inserisci

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

all'inizio del file.


15

Aggiungi l'impostazione di seguito a .eslintrc.js/ .eslintrc.jsonper ignorare questi errori:

  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
  }

Perché? Se stai utilizzando NEXT.js, non è necessario importare Reactall'inizio dei file, nextjs lo fa per te.


Utente NextJs qui, grazie per questo. Dato che l'aggiunta della regola "react/react-in-jsx-scope": "off"eliminerà l'errore, cosa significa aggiungere globals? Grazie!
DeBraid

10
import React, { Component } from 'react';

Questo è un errore di ortografia, devi digitare Reactinvece di react.


Questa risposta esatta era già fornita come risposta accettata.
Dylan Maxey
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.