Dlaczego składnik ES6 React działa tylko z „domyślnym eksportem”?

Ten komponent działa:

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

Jeśli usunę ostatni wiersz, to nie zadziała.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Chyba nie rozumiem czegoś w składni es6. Czy to nie musi eksportować bez znaku „default”?

Eksportowanie bez defaultoznacza, że ​​jest to „nazwany eksport”. Możesz mieć wiele nazwanych eksportów w jednym pliku. Więc jeśli to zrobisz,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

następnie musisz zaimportować te eksporty, używając ich dokładnych nazw. Aby użyć tych składników w innym pliku, który musisz zrobić,

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

Alternatywnie, jeśli eksportujesz jako taki defaulteksport,

export default class Template {}

Następnie w innym pliku importowania domyślny eksport bez użycia {}, tak,

import Template from './components/templates'

Może istnieć tylko jeden domyślny eksport na plik. W React konwencją jest eksportowanie jednego komponentu z pliku i eksportowanie go jako domyślnego eksportu.

Podczas importowania możesz zmienić nazwę domyślnego eksportu,

import TheTemplate from './components/templates'

Możesz jednocześnie importować domyślny i nazwany eksport,

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

Dodaj {} podczas importowania i eksportowania: export { ... };| import { ... } from './Template';

eksport →import { ... } from './Template'

eksportuj domyślnie →import ... from './Template'

Oto działający przykład:

// 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 />
    </>
  );
}

⚡️ Robocza piaskownica do zabawy: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark