Pourquoi le composant es6 react fonctionne uniquement avec «export par défaut»?

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 nécessaire d'exporter sans signe "par défaut"?

Exporter sans defaultsignifie que c'est une "exportation nommée". Vous pouvez avoir plusieurs exportations nommées dans un seul fichier. Donc, si vous faites cela,

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 defaultqu'export comme celui-ci,

export default class Template {}

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

import Template from './components/templates'

Il ne peut y avoir qu'une seule exportation par défaut par fichier. Dans React, c'est une convention d'exporter un composant à partir d'un fichier et de l'exporter comme exportation par défaut.

Vous êtes libre de renommer l'exportation par défaut lors de son importation,

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'

Ajoutez {} lors de l'importation et de l'exportation: export { ... };| import { ... } from './Template';

exporter →import { ... } from './Template'

exporter par défaut →import ... from './Template'

Voici un exemple de travail:

// 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 />
    </>
  );
}

⚡️ Sandbox de travail pour jouer: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark