'React' должен быть в области видимости при использовании JSX react / response-in-jsx-scope?

129

Я разработчик 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 / response-in-jsx-scope должно быть в области видимости.

reactjs Гопинатх Калиаппан
источник

Ответы:

250

Строка импорта должна быть:

import React, { Component }  from 'react';

Обратите внимание на заглавную букву R для React.

Патрик
источник
3
как этого избежать. Я имею в виду, когда я создаю функцию без сохранения состояния, в Nextjs она не требует этого
Мухаймин CS
1
@MuhaiminCS измените правило в вашем файле eslintrc
Патрик
25

Для тех, кто до сих пор не получил общепринятого решения:

Добавить

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

вверху файла.

Анкит Пандей
источник
15

Добавьте ниже параметр, чтобы .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 сделает это за вас.

JerryGoyal
источник
Пользователь NextJs здесь, спасибо за это. Если добавление правила "react/react-in-jsx-scope": "off"устранит ошибку, что дает добавление globals? Спасибо!
ДеБрейд,
10 
import React, { Component } from 'react';

Это орфографическая ошибка, вам нужно ввести Reactвместо react.

kallayya Hiremath
источник
Этот точный ответ уже был принят как принятый.
Дилан Макси,
0

Это ошибка, вызванная импортом неправильного модуля, реагирующего из 'react', как насчет того, чтобы попробовать это: 1-й

import React , { Component}  from 'react';

2-й Или вы также можете попробовать это:

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath',
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;
Ламех Десаи
источник