Dlaczego komponent reactowy es6 działa tylko z "export default"?

Question

Dlaczego komponent reactowy es6 działa tylko z "export default"?

Ten komponent działa:

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

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

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

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

178

javascript ecmascript-6

Author: Felix Kling, 2015-08-06

Source

1 answers

score 473 · Accepted Answer

Eksport bez default oznacza, że jest to "named export". Możesz mieć wiele nazwanych eksportów w jednym pliku. Więc jeśli to zrobisz,

export class Template {}
export class AnotherTemplate {}

Następnie musisz zaimportować te eksport, używając ich dokładnych nazw. Więc aby użyć tych komponentów w innym pliku, musisz to zrobić,

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

Alternatywnie, jeśli eksportujesz jako default eksport w ten sposób,

export default class Template {}

Następnie w innym pliku importujesz domyślny eksport bez użycia {}, Jak to,

import Template from './components/templates'

Może być tylko jeden domyślny eksport na plik. W Reaccie jest to konwencja eksportowania jednego komponentu z pliku, a eksportowanie go jest domyślnym eksportem.

Możesz zmienić nazwę domyślnego eksportu podczas importu,

import TheTemplate from './components/templates'

I możesz importować eksport domyślny i nazwany w tym samym czasie,

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