es6 반응 구성 요소가 "내보내기 기본값"에서만 작동하는 이유는 무엇입니까?

이 구성 요소는 작동합니다.

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 Template from './components/templates'

파일 당 하나의 기본 내보내기 만있을 수 있습니다. React에서는 파일에서 하나의 구성 요소를 내보내고 기본 내보내기로 내보내는 규칙입니다.

가져올 때 기본 내보내기의 이름을 자유롭게 바꿀 수 있습니다.

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