☰

es6 reactコンポーネントが「export default」でのみ機能するのはなぜですか? 質問する

tag-icon • tag-icon javascript ecmascript-6
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」なしでエクスポートする必要があるのではないですか?

ベストアンサー1

なしでエクスポートすると、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'

おすすめ記事