Чому компонент es6 react працює лише з "експортом за замовчуванням"?

Цей компонент працює:

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

Якщо я видаляю останній рядок, він не працює.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Я думаю, я щось не розумію в синтаксисі es6. Хіба це не доведеться експортувати без знаку "за замовчуванням"?

Експорт без 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 />
    </>
  );
}

OrРобота в пісочниці для гри: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark