리액트 컴포넌트 내보내기가 작동하지 않는 이유는 무엇입니까?

리액트 컴포넌트 내보내기가 작동하지 않는 이유는 무엇입니까?

그냥 리액션을 해서 직접 해봤어요.화면에 hello world를 표시하기 위해 몇 시간 동안 웹 팩을 구성한 후 바로 시작할 수 있을 것 같았는데 파일에서 다른 컴포넌트를 렌더링하려고 한 후 다음 문제가 발생했습니다.

메인 파일은 app.js로 모든 것을 렌더링합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Hello 컴포넌트는 같은 폴더에 있는 내 hello.js에서 가져옵니다.

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

Import/export를 하지 않고 app.js만으로 모든 것을 할 때는 정상적으로 렌더링되었습니다.컴파일도 잘 되어 있습니다.그러나 현재 콘솔에 오류가 많이 있습니다.내가 뭘 놓쳤지?

감사해요.

게르트

내보내기가defaultImport 컴포넌트 이름 주위에 중괄호는 필요 없습니다.

import Hello from './hello';

Axel Raushmayer의 기술 기사 중 최종 ES6 모듈 구문에 대한 자세한 내용은 다음과 같습니다.

그리고 여기 같은 주제에 대한 조금 덜 전문적인 게시물이 있습니다.

사용하는 기본 클래스를 가져올 때

import ClassName from 'something';

다른 클래스를 Import 할 때 사용하는

import {ClassName} from 'something';

예:

hello.hello.disc 파일에 저장

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

class Other extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}
export default Hello;
export Other;

다른 파일로

import Hello, {Other} from './hello';

힌트: 기본 클래스를 다른 이름으로 가져올 수도 있습니다.

import Component, {Other} from './hello';

언급URL : https://stackoverflow.com/questions/47619405/why-does-my-react-component-export-not-work