Perché `Export Default Const` non è valido?

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

Eppure va bene:

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

Questo può essere spiegato per favore perché constnon è valido con export default? È un'aggiunta non necessaria e tutto ciò che export defaultviene dichiarato come si presume un consto tale?

constè come let, è una LexicalDeclaration ( VariableStatement, Declaration ) utilizzata per definire un identificatore nel blocco.

Stai provando a mescolarlo con la defaultparola chiave, che si aspetta che HoistableDeclaration, ClassDeclaration o AssignmentExpression la segua.

Pertanto è un SyntaxError .

Se vuoi constqualcosa devi fornire l'identificatore e non usarlo default.

exportdi per sé accetta una VariableStatement o una Dichiarazione alla sua destra.

AFAIK l'esportazione in sé non dovrebbe aggiungere nulla al tuo ambito attuale.

Quanto segue va beneexport default Tab;

Tabdiventa un'espressione di assegnazione poiché viene assegnato il nome predefinito ^?

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

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

Puoi anche fare qualcosa del genere se vuoi esportare di default una const / let, invece di

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

Puoi fare qualcosa del genere, che non mi piace personalmente.

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

Se il nome del componente è spiegato nel nome del file MyComponent.js, semplicemente non nominare il componente, mantiene il codice sottile.

import React from 'react'

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

Aggiornamento : poiché questo lo etichetta come sconosciuto nella traccia dello stack, non è raccomandato

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

Ecco un esempio ridotto di uno dei miei percorsi, che mostra come è possibile definire il componente ed esportarlo come predefinito 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: utilizzo il termine "scena" per il componente di livello superiore di qualsiasi percorso).

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

La risposta condivisa da Paul è la migliore. Per espandere di più,

Può esistere una sola esportazione predefinita per file. Considerando che possono esserci più esportazioni const. La variabile predefinita può essere importata con qualsiasi nome, mentre la variabile const può essere importata con il suo nome particolare.

var message2 = 'Sono esportato';

esportazione messaggio predefinito2;

export const message = 'Anche io sono esportato'

Per quanto riguarda le importazioni, dobbiamo importarlo in questo modo:

import {message} da './test';

o

importa il messaggio da './test';

Con la prima importazione, viene importata la variabile const mentre, con la seconda, verrà importata quella predefinita.

default è fondamentalmente const someVariableName

Non hai bisogno di un identificatore con nome perché è l'esportazione predefinita per il file e puoi nominarlo come vuoi quando lo importi, quindi defaultè solo condensare l'assegnazione delle variabili in una singola parola chiave.

Per me questa è solo una delle tante idiosincrasie (enfasi sull'idio (t)) del dattiloscritto che induce le persone a strapparsi i capelli e maledire gli sviluppatori. Forse potrebbero lavorare per trovare messaggi di errore più comprensibili.