반응 구성 요소에 두 개의 내보내기 선언이 있습니다.

Question

다음 구조를 사용하여 구성 요소를 만들었습니다.

class Chip extends React.Component { 
    //Some Code 
} 
export default Chip; 

그리고 구성 요소를 실행할 때 다음 오류가 발생합니다.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`. 
    at invariant (webpack-internal:///1:42) 
    at instantiateReactComponent (webpack-internal:///79:72) 
    at instantiateChild (webpack-internal:///147:42) 
    at eval (webpack-internal:///147:69) 
    at traverseAllChildrenImpl (webpack-internal:///83:75) 
    at traverseAllChildrenImpl (webpack-internal:///83:91) 
    at traverseAllChildren (webpack-internal:///83:170) 
    at Object.instantiateChildren (webpack-internal:///147:68) 
    at ReactDOMComponent._reconcilerInstantiateChildren (webpack-internal:///146:183) 
    at ReactDOMComponent.mountChildren (webpack-internal:///146:222) 

그러나 클래스를 다음과 같이 변경하면 작동합니다.

export class Chip extends React.Component { 
    //Some Code 
} 
export default Chip; 

내가 뭘 잘못하고 있니?

Answer 1

당신이

export default Chip; 

을 할 경우에 당신은과 같이 가져와야합니다 :

import Chip from "./Chip"; 

을 당신이 할 경우

export { Chip, helperA, helperB }; 

또는

export class Chip // etc.. 
export const helperA // yada yada yada 

,

당신과 같이 가져와야합니다 :

import { Chip, helperA, helperB } from "./Chip"; 

수출 클래스 하면 작품 당신은 내가 준 두 번째 옵션처럼 수입해야합니다.

첫 번째 옵션으로 변경하면 올바르게 작동합니다.