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

241

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"?

javascript ecmascript-6

— stkvtflw
fuente

puedes escribir como export default class Template extends React.Component {

— andykenward

Lo sé. Pero, ¿cómo puedo importar el componente que se exportó sin "predeterminado"? Debería ser posible

— stkvtflw

@stkvtflw Si respondí tu pregunta, acéptala para que otros usuarios también puedan beneficiarse.

— Jed Richards el

Respuestas:

571

Exportar sin defaultmedios 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 defaultexportación de esta manera,

export default class Template {}

Luego, en otro archivo, importa la exportación predeterminada sin utilizar {}, 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'

— Jed Richards
fuente

OKAY. Pero esta parece ser otra decisión aparentemente arbitraria para la que no veo la razón pero que tengo que memorizar. ¿Me estoy perdiendo alguna buena razón por la que es así? En muchos proyectos habrá docenas de componentes React. Tener cada uno su propio archivo, no importa cuán pequeño parezca, bueno, un poco anal. En particular, se vuelve doloroso si muchos de ellos comparten grupos de funciones auxiliares. Crea más líneas de cosas para mantener sincronizadas, lo que parece un poco contraproducente. ¿Qué me estoy perdiendo?

Gracias. Creo que su respuesta es perfectamente explicado esto: import React, {Component} from 'react';.

— Qian Chen el

Buena respuesta. Tengo algo que agregarle: intente usar declaraciones de importación como esta: en import RaisedButton from 'material-ui/RaisedButton'; lugar de import {RaisedButton} from 'material-ui'; Esto hará que su proceso de compilación sea más rápido y su salida de compilación sea más pequeña.

— Shekhar Kumar

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— xgqfrms

@ShekharKumar ¿Tiene una fuente para import Binding from 'module/Binding'ser más eficiente que import {Binding} from 'module'?

— Jeevan Takhar

Agregue {} al importar y exportar: export { ... };| import { ... } from './Template';

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

exportación predeterminada →import ... from './Template'

Aquí hay un ejemplo de trabajo:

// 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 trabajo para jugar: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

— Hasan Sefa Ozalp
fuente