JSX react / react-in-jsx-kapsamı kullanılırken 'React' kapsam dahilinde olmalıdır?


129

Ben bir Açısal Geliştiriciyim ve React'te yeniyim, Bu basit tepki Bileşeni ama çalışmıyor

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;

Hata: JSX react / react-in-jsx-kapsamı kullanılırken 'React' kapsam dahilinde olmalıdır

Yanıtlar:


250

İçe aktarma satırı şöyle olmalıdır:

import React, { Component }  from 'react';

React için büyük R harfine dikkat edin.


3
nasıl önlenir. Demek istediğim, Nextjs'de durumsuz bir işlev oluşturduğumda bunu gerektirmiyor
Muhaimin CS

1
@MuhaiminCS eslintrc dosyanızdaki kuralı değiştirin
patrick

24

Hala kabul edilen çözümü alamayanlar için:

Ekle

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

dosyanın en üstünde.


15

Bu hataları yok saymak için aşağıdaki ayarı .eslintrc.js/ .eslintrc.jsondeğerine ekleyin :

  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
  }

Neden? Eğer kullanıyorsanız, NEXT.jso zaman Reactdosyaların en üstünde içe aktarmanıza gerek yoktur, nextjs bunu sizin için yapar.


NextJs kullanıcısı burada, bunun için teşekkürler. Kuralın eklenmesi "react/react-in-jsx-scope": "off"hatayı ortadan kaldırırsa, ekleme ne işe globalsyarar? Teşekkürler!
DeBraid

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

Bu bir yazım hatasıdır, Reactbunun yerine yazmanız gerekir react.


Bu kesin cevap zaten kabul edilmiş cevap olarak sağlanmıştır.
Dylan Maxey
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.