반응 JS 오류: 정의되지 않은 반응/jsx-no-def

반응 JS 오류: 정의되지 않은 반응/jsx-no-def

다음을 사용하여 지도 기능을 개발하고 있습니다.ReactJS,나의app.js파일은 다음과 같습니다.

import React, { Component } from 'react';
import './Map';
class App extends Component {
   render() {
     return (
         <div className="App">
            <Map/>
         </div>
     );
   }
}
export default App;

에러는 다음과 같습니다.

./src/App.js
Line 8:  'Map' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

어떻게 하면 이 문제를 해결할 수 있을까요?

사용해보십시오.

import Map from './Map';

사용할 때import 'module'이 모듈은 스크립트로 실행됩니다.이는 글로벌 네임스페이스에 부작용(예: 오래된 브라우저 또는 지원되지 않는 브라우저의 새로운 기능 polyfill)을 도입하려고 할 때 유용합니다.

ES6 모듈은 기본 내보내기 및 일반 내보내기를 정의할 수 있습니다.구문을 사용하는 경우import defaultExport from 'module'에일리어스 default Export를 사용하여 해당 모듈의 기본 내보내기를 Import합니다.

ES6 Import에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import를 참조하십시오.

해야 한다import Map from './Map'React는 Import할 변수가 어디에 있는지 알 수 없음을 알려 주는 것입니다.

가끔 이런 일이 생기곤 하는데, 보통은 그냥 단순한 실수예요.디테일, 단순한 오타 등에 주의해 주세요.예를 들어 Import 문을 복사/붙일 때 다음과 같이 입력합니다.

임의의 모듈을 Import하기 위한 구문은 다음과 같습니다.

import {  } from "module";

또는

import module-name from "module";

오류 발생 전(작은 "c"가 있는 케이크 용기)

수정 후

클래스 이름을 명시적으로 지정하여 가져올 구성 요소를 지정해야 합니다.당신의 경우, 그것은 지도입니다.

import Map from './Map';

class App extends Component{
    /*your code here...*/
}

에map.jsx또는map.js파일(기본값으로 내보내는 경우:

export default MapComponent;

Import 할 수 있습니다.

import MapComponent from './map'

여기서와 같이 디폴트로 내보내지 않으면

export const MapComponent = () => { ...whatever }

이렇게 곱슬곱슬한 괄호 안에 들여와야 돼요

import { MapComponent } from './map'

**Here we get into your problem:**
sometimes in our project (most of the time that I work with react) we need to import our styles in our javascript files to use it. in such cases we can use that syntax because we have a bundler like Webpack that takes care of it, then later on, when we want to bundle our app, Webpack is going to extract our CSS files and put it in a separate (for example) app.css file. In those situations, we can use such syntax to import our CSS files into our javascript modules.

다음과 같습니다.

import './css/app.css'

sass를 사용하는 경우 웹 팩을 사용하여 sass 로더만 사용하면 됩니다.

이상하게도 제가 실패한 이유는 컴포넌트 이름에 적용하던 Camel Case에 관한 것이었습니다. MyComponent이 에러가 발생하고 있었는데, 그 후 로 이름을 변경했습니다.Mycomponent그리고 voila, 성공했어!!!

이렇게 써주세요 -->

import Map from './map';

1. 이것 좀 봐Maplater first는 대문자입니다.(중요한 주의)
2. '파일 위치를 올바르게 언급하기만 하면 됩니다'라는 싱글을 삽입할 수 있습니다.

여기서 Map.js 파일에서 가져올 클래스 이름을 지정하지 않았습니다.Map.js 파일에 Map이 클래스 내보내기 가능 클래스 이름인 경우 코드는 다음과 같습니다.

import React, { Component } from 'react';
import Map from  './Map';
class App extends Component {
   render() {
     return (
         <div className="App">
            <Map/>
         </div>
     );
   }
}
export default App;

nodejs와 매우 유사합니다.

var User= require('./Users');

이 경우 반응:

import User from './User'

지금 바로 사용할 수 있습니다.

return (
      <Users></Users>
    )

이 알고리즘이 도움이 되었으면 합니다.

1. npm install reactjs

2. npx create-react-app ded-moroz.

3. 디렉토리 'ded-moroz' 에 입력합니다.

4. npx create-react-component Weapon(어느쪽이든)

5. 구성 요소를 'src' 디렉터리로 이동

6. jsx 파일에 입력하고 "무기"를 "눈"으로 편집합니다(자세한 내용은 테스트 중입니다).

7. 을 열고 .js 파일을 넣습니다.import Weapon from './Weapon/Weapon';

8. 붙이기<Weapon/><div className="App">.

9. 실행합니다.npm start

언급URL : https://stackoverflow.com/questions/44441734/react-js-error-is-not-defined-react-jsx-no-undef