web-dev-qa-db-fra.com

Pourquoi le composant es6 réagit-il uniquement avec "export default"?

Ce composant fonctionne:

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

Si je supprime la dernière ligne, cela ne fonctionne pas.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Je suppose que je ne comprends pas quelque chose dans la syntaxe es6. N'est-il pas obligé d'exporter sans signe "par défaut"?

javascriptecmascript-6
213
stkvtflw

Exporter sans default signifie qu'il s'agit d'une "exportation nommée". Vous pouvez avoir plusieurs exportations nommées dans un seul fichier. Donc si tu fais ça,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

alors vous devez importer ces exportations en utilisant leurs noms exacts. Donc, pour utiliser ces composants dans un autre fichier, vous devez le faire,

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

Alternativement, si vous exportez en tant qu'export default comme ceci,

export default class Template {}

Ensuite, dans un autre fichier, vous importez l’exportation par défaut sans utiliser le {}, comme ceci,

import Template from './components/templates'

Il ne peut y avoir qu'un seul export par défaut par fichier. Dans React, il s'agit d'une convention permettant d'exporter un composant d'un fichier et de l'exporter par défaut.

Vous êtes libre de renommer l'exportation par défaut au fur et à mesure que vous l'importez,

import TheTemplate from './components/templates'

Et vous pouvez importer des exportations par défaut et nommées en même temps,

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