es6 react 컴포넌트가 "export default"에서만 동작하는 이유는 무엇입니까?

es6 react 컴포넌트가 "export default"에서만 동작하는 이유는 무엇입니까?

이 컴포넌트는 동작합니다.

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

마지막 열을 제거하면 작동이 안 돼요.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

es6 구문을 이해 못 하겠네요"default"라는 부호를 붙이지 않고 수출해야 하는 것 아닌가요?

내보내기(없음default'이름 있는 수출'이라는 뜻입니다.하나의 파일에 여러 개의 이름 있는 내보내기를 포함할 수 있습니다.그래서 이렇게 하면

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

그런 다음 정확한 이름을 사용하여 내보내기를 가져와야 합니다.이 컴포넌트를 다른 파일로 사용하려면 , 다음의 작업을 실시해 주세요.

import {Template, AnotherTemplate} from './components/templates'

또는 로서 내보내는 경우default이렇게 내보내면

export default class Template {}

그런 다음 다른 파일에서 기본 내보내기를 Import합니다.{},이것처럼.

import Template from './components/templates'

파일당 기본 내보내기는 1개뿐입니다.리액트에서는 하나의 컴포넌트를 파일에서 내보내는 것이 규칙이며 이를 내보내는 것이 기본 내보내기입니다.

가져올 때 기본 내보내기 이름을 변경할 수 있습니다.

import TheTemplate from './components/templates'

또한 기본 내보내기 및 명명된 내보내기를 동시에 가져올 수 있습니다.

import Template,{AnotherTemplate} from './components/templates'

가져오고 내보내는 동안 { } 추가:export { ... };|import { ... } from './Template';

→ 내보내기import { ... } from './Template'

내보내기 기본값 →import ... from './Template'

---

다음으로 작업 예를 제시하겠습니다.

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

---

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

⚡ 【놀아야 할 샌드박스 작업】 https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

    // imports
    // ex. importing a single named export
    import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
    import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
    import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
    export const MyComponent = () => {}
    export const MyComponent2 = () => {}
    
    import * as MainComponents from "./MyComponent";
    // use MainComponents.MyComponent and MainComponents.MyComponent2
    //here

개체 내보내기:

class EmployeeService { }
export default new EmployeeService()

import EmployeeService from "../services/EmployeeService"; // default import

어레이 내보내기

 export const arrExport = [
        ['first', 'First'],
        ['second', 'Second'],
        ['third', 'Third'],
      ]
    
    import {arrExport} from './Message' //named import

// react 및 javascript app이 없다면 Import 스테이트먼트에 .discript 확장자를 기재합니다.

기본 컴포넌트는 하나만 내보낼 수 있으며 Import 시 별칭을 지정하지 않고 이름을 변경할 수 있습니다(as 사용).

언급URL : https://stackoverflow.com/questions/31852933/why-es6-react-component-works-only-with-export-default