[解決済み】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 は、"名前付きエクスポート"であることを意味します。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ファイルにつき1つだけです。Reactでは、1つのファイルから1つのコンポーネントをエクスポートし、それをデフォルトのエクスポートとしてエクスポートするのが慣例となっています。

デフォルトのエクスポートをインポートする際に、自由に名前を変更することができます。

import TheTemplate from './components/templates'

そして、デフォルトと名前付きエクスポートを同時にインポートすることができます。

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