Por que o componente es6 react funciona apenas com "padrão de exportação"?

241

Este componente funciona:

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

Se eu remover a última linha, ele não funcionará.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Eu acho que não entendo algo na sintaxe es6. Não é necessário exportar sem o sinal "padrão"?

stkvtflw
fonte
7
você pode escrever como export default class Template extends React.Component {
andykenward
Eu sei. Mas como posso importar o componente que foi exportado sem "padrão"? Deve ser possível
stkvtflw
2
@stkvtflw Se eu responder sua pergunta, aceite-a para que outros usuários também possam se beneficiar.
perfil completo de Jed Richards

Respostas:

571

Exportar sem defaultsignifica que é uma "exportação nomeada". Você pode ter várias exportações nomeadas em um único arquivo. Então, se você fizer isso,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

você precisará importar essas exportações usando seus nomes exatos. Então, para usar esses componentes em outro arquivo que você teria que fazer,

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

Como alternativa, se você exportar como defaultexportação assim,

export default class Template {}

Em outro arquivo, você importa a exportação padrão sem usar o {}, assim,

import Template from './components/templates'

Só pode haver uma exportação padrão por arquivo. No React, é uma convenção exportar um componente de um arquivo e exportá-lo como exportação padrão.

Você pode renomear a exportação padrão à medida que a importa,

import TheTemplate from './components/templates'

E você pode importar exportações padrão e nomeadas ao mesmo tempo,

import Template,{AnotherTemplate} from './components/templates'
Jed Richards
fonte
12
ESTÁ BEM. Mas essa parece ser mais uma decisão aparentemente arbitrária que eu não vejo a lógica, mas preciso memorizar. Estou faltando alguma boa razão para ser assim? Em muitos projetos, haverá dezenas de componentes do React. Ter cada um o seu próprio arquivo, por menor que pareça, bem, um pouco anal. É particularmente doloroso se muitos deles compartilham grupos de funções auxiliares. Faz com que mais linhas de coisas se mantenham sincronizadas, o que parece um pouco contra-bondade. o que estou perdendo?
9
Obrigado. Eu acho que você responde perfeitamente explicado isso: import React, {Component} from 'react';.
Qian Chen
10
Boa resposta. Eu tenho algo a acrescentar: tente usar instruções de importação como esta: em import RaisedButton from 'material-ui/RaisedButton'; vez de import {RaisedButton} from 'material-ui'; Isso tornará seu processo de criação mais rápido e sua saída menor.
Shekhar Kumar #
4
@ShekharKumar Você tem uma fonte por import Binding from 'module/Binding'ser mais eficiente do que import {Binding} from 'module'?
Jeevan Takhar 28/03
4

Adicione {} ao importar e exportar: export { ... };| import { ... } from './Template';

exportarimport { ... } from './Template'

padrão de exportaçãoimport ... from './Template'


Aqui está um exemplo de trabalho:

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

⚡️Trabalhando em sandbox para brincar: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

Hasan Sefa Ozalp
fonte