javascript - ecmascript - ¿Por qué el componente es6 react funciona solo con "exportación predeterminada"?

ecmascript 6 support

Question

Este componente funciona:

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

Si elimino la última fila, no funciona.

Uncaught TypeError: Cannot read property ''toUpperCase'' of undefined

Supongo que no entiendo algo en la sintaxis es6. ¿No es necesario exportar sin signo "predeterminado"?

Answer 1

Exportar sin default significa que es una "exportación con nombre". Puede tener múltiples exportaciones con nombre en un solo archivo. Entonces si haces esto,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

entonces debe importar estas exportaciones utilizando sus nombres exactos. Entonces, para usar estos componentes en otro archivo que tendría que hacer,

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

Alternativamente, si exporta como la exportación default esta manera,

export default class Template {}

Luego, en otro archivo, importa la exportación predeterminada sin usar el {} , como este,

import Template from ''./components/templates''

Solo puede haber una exportación predeterminada por archivo. En React es una convención exportar un componente de un archivo, y exportarlo es la exportación predeterminada.

Puede cambiar el nombre de la exportación predeterminada a medida que la importa,

import TheTemplate from ''./components/templates''

Y puede importar exportaciones predeterminadas y con nombre al mismo tiempo,

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