Perché 'Esporta valore predefinito' non è valido?

Question

vedo che quanto segue va bene:

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

Tuttavia, questo non è corretto:

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

Ma questo va bene:

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

si può spiegare prega perché const è non valido con export default? E 'un'aggiunta non necessaria & qualsiasi cosa dichiarata come export default si presume uno const o simile?

Answer 1

const è come let, it is a LexicalDeclaration (VariableStatement, Dichiarazione) usato per definire un identificatore nel blocco.

Si sta provando a mescolare questo con la parola chiave default, which expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression per seguirlo.

Pertanto è un SintassiErrore.

---

Se si vuole const qualcosa è necessario fornire l'identificativo e non usare default.

export da solo accetta un VariableStatement o Dichiarazione alla sua destra.

---

AFAIK l'esportazione di per sé non dovrebbe aggiungere nulla alla portata attuale.

---

Quello che segue è bene export default Tab;

Tab diventa un AssignmentExpression come è dato il nome di default ^?

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

Qui Tab = connect(mapState, mapDispatch)(Tabs); è un AssignmentExpression.

Answer 2

si può anche fare una cosa del genere, se si desidera esportare predefinito un const/lasciare che, invece di

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

Si può fare qualcosa di simile, che non mi piace personalmente.

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

Answer 3

La risposta di Paul è quella che stai cercando.Tuttavia, in termini pratici, penso che potresti essere interessato allo schema che ho utilizzato nelle mie app React + Redux.

Ecco un esempio stripped-down da uno dei miei percorsi, che mostra come è possibile definire il componente ed esportarlo come default con una singola istruzione:

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: io uso il termine "Scene" per il componente di livello superiore di qualsiasi percorso).

Spero che questo sia utile. Penso che sia molto più pulito rispetto al convenzionale connect(mapState, mapDispatch)(BareComponent)