Por que o `Export Default Const` é inválido?

Vejo que o seguinte é bom:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

No entanto, isso está incorreto:

export default const Tab = connect( mapState, mapDispatch )( Tabs );

No entanto, isso é bom:

export default Tab = connect( mapState, mapDispatch )( Tabs );

Isso pode ser explicado, por que consté inválido com export default? É uma adição desnecessária e qualquer coisa declarada como export defaulté presumida const?

consté como let, é uma LexicalDeclaration ( VariableStatement, Declaration ) usada para definir um identificador no seu bloco.

Você está tentando misturar isso com a defaultpalavra - chave, que espera que um HoistableDeclaration, ClassDeclaration ou AssignmentExpression o siga.

Portanto, é um SyntaxError .

Se você deseja constalgo, é necessário fornecer o identificador e não usá-lo default.

exportpor si só aceita uma VariableStatement ou Declaration à sua direita.

AFAIK a exportação em si não deve adicionar nada ao seu escopo atual.

O seguinte é bomexport default Tab;

Tabse torna uma AssignmentExpression , pois recebe o nome padrão ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); está bem

Aqui Tab = connect( mapState, mapDispatch )( Tabs );está uma AssignmentExpression .

Você também pode fazer algo assim se desejar exportar uma const / let padrão, em vez de

const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent

Você pode fazer algo assim, que eu não gosto pessoalmente.

let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);

Se o nome do componente for explicado no nome do arquivo MyComponent.js, apenas não o nomeie, mantém o código reduzido.

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

Atualização : como isso é identificado como desconhecido no rastreamento de pilha, não é recomendável

A resposta de Paulo é a que você está procurando. No entanto, por uma questão prática, acho que você pode estar interessado no padrão que tenho usado em meus próprios aplicativos React + Redux.

Aqui está um exemplo simplificado de uma das minhas rotas, mostrando como você pode definir seu componente e exportá-lo como padrão com uma única instrução:

import React from 'react';
import { connect } from 'react-redux';

@connect((state, props) => ({
    appVersion: state.appVersion
    // other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }

(Nota: eu uso o termo "Cena" para o componente de nível superior de qualquer rota).

Espero que isto seja útil. Eu acho que é muito mais limpo do que o convencionalconnect( mapState, mapDispatch )( BareComponent )

A resposta compartilhada por Paulo é a melhor. Para expandir mais,

Pode haver apenas uma exportação padrão por arquivo. Considerando que pode haver mais de uma const exportações. A variável padrão pode ser importada com qualquer nome, enquanto a variável const pode ser importada com seu nome específico.

var message2 = 'Eu sou exportado';

exportar message2 padrão;

export const message = 'Eu também sou exportado'

No lado das importações, precisamos importá-lo assim:

import {message} de './test';

ou

importar mensagem de './test';

Com a primeira importação, a variável const é importada, enquanto, com a segunda, a padrão é importada.

default é basicamente const someVariableName

Você não precisa de um identificador nomeado porque é a exportação padrão para o arquivo e pode nomeá-lo como quiser ao importá-lo; portanto, defaultestá apenas condensando a atribuição de variável em uma única palavra-chave.

Para mim, essa é apenas uma das muitas idiossincrasias (ênfase no idiota (t)) do texto datilografado que faz com que as pessoas arrancem os cabelos e amaldiçoem os desenvolvedores. Talvez eles possam trabalhar com mensagens de erro mais compreensíveis.