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は、「名前付きエクスポート」です。1つのファイルに複数の名前付きエクスポートを含めることができます。これを行うと、

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

次に、正確な名前を使用してこれらのエクスポートをインポートする必要があります。これらのコンポーネントを別のファイルで使用するには、

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

または、defaultこのようなエクスポートとしてエクスポートすると、

export default class Template {}

次に、別のファイルで{}、次のようにを使用せずにデフォルトのエクスポートをインポートします。

import Template from './components/templates'

ファイルごとにデフォルトのエクスポートは1つだけです。Reactでは、ファイルから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 />
    </>
  );
}

sand️サンドボックスを使って遊ぶ：https ://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark