Perché es6 react component funziona solo con "export default"?

Question

Questo componente funziona:

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

Se rimuovo ultima fila, non funziona.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined 

Immagino, non capisco qualcosa nella sintassi es6. Non è necessario esportare senza segno "predefinito"?

Answer 1

L'esportazione senza default significa che si tratta di una "esportazione denominata". Puoi avere più esportazioni con nome in un singolo file. Quindi, se lo fai,

export class Template {} 
export class AnotherTemplate {} 

quindi devi importare queste esportazioni usando i loro nomi esatti. Quindi, per utilizzare questi componenti in un altro file che avrebbe dovuto fare,

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

In alternativa, se si esporta come il default esportazione come questo,

export default class Template {} 

Poi in un altro file si importa l'esportazione di default senza utilizzando il {}, in questo modo,

import Template from './components/templates' 

ci può essere solo uno di esportazione predefinito per file. In React è una convenzione esportare un componente da un file e esportarlo come esportazione predefinita.

Sei libero di rinominare l'esportazione di default come la si importa,

import TheTemplate from './components/templates' 

E si può importare di default e le esportazioni di nome, allo stesso tempo,

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