Warum ist "Export Default Const" ungültig?

Ich sehe, dass Folgendes in Ordnung ist:

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

Dies ist jedoch falsch:

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

Doch das ist in Ordnung:

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

Kann dies bitte erklärt werden, warum constmit ungültig ist export default? Ist es eine unnötige Ergänzung und irgendetwas, das als export defaulta constoder so vermutet wird ?

constist wie let, es ist LexicalDeclaration ( VariableStatement, Deklaration ) verwendet , um eine Kennung in dem Block zu definieren.

Sie versuchen, dies mit dem defaultSchlüsselwort zu mischen , das erwartet , dass eine HoistableDeclaration, ClassDeclaration oder AssignmentExpression darauf folgt.

Daher ist es ein SyntaxError .

Wenn Sie constetwas möchten, müssen Sie die Kennung angeben und nicht verwenden default.

exportselbst akzeptiert eine VariableStatement oder Deklaration zu seiner Rechten.

AFAIK Der Export an sich sollte Ihrem aktuellen Umfang nichts hinzufügen.

Das Folgende ist in Ordnungexport default Tab;

Tabwird ein AssignmentExpression, da er den Standardnamen erhält ^?

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

Hier Tab = connect( mapState, mapDispatch )( Tabs );ist ein AssignmentExpression .

Sie können auch so etwas tun, wenn Sie stattdessen standardmäßig eine const / let exportieren möchten

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

Sie können so etwas tun, was ich persönlich nicht mag.

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

Wenn der Komponentenname im Dateinamen erläutert wird, MyComponent.jsbenennen Sie die Komponente einfach nicht, da der Code schlank bleibt.

import React from 'react'

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

Update : Da dies in der Stapelverfolgung als unbekannt gekennzeichnet ist, wird es nicht empfohlen

Pauls Antwort ist die, die Sie suchen. Aus praktischen Gründen könnten Sie jedoch an dem Muster interessiert sein, das ich in meinen eigenen React + Redux-Apps verwendet habe.

Hier ist ein reduziertes Beispiel von einer meiner Routen, das zeigt, wie Sie Ihre Komponente definieren und mit einer einzigen Anweisung als Standard exportieren können:

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 { /* ... */ }

(Hinweis: Ich verwende den Begriff "Szene" für die oberste Komponente einer Route.)

Ich hoffe das ist hilfreich. Ich denke, es sieht viel sauberer aus als das konventionelleconnect( mapState, mapDispatch )( BareComponent )

Die Antwort von Paulus ist die beste. Um mehr zu erweitern,

Es kann nur einen Standardexport pro Datei geben. Während es mehr als einen konstanten Export geben kann. Die Standardvariable kann mit einem beliebigen Namen importiert werden, während die const-Variable mit ihrem bestimmten Namen importiert werden kann.

var message2 = 'Ich werde exportiert';

Standardnachricht exportieren2;

export const message = 'Ich werde auch exportiert'

Auf der Importseite müssen wir es wie folgt importieren:

{message} aus './test' importieren;

oder

Nachricht aus './test' importieren;

Beim ersten Import wird die Variable const importiert, während beim zweiten Import die Standardvariable importiert wird.

default ist im Grunde const someVariableName

Sie benötigen keinen benannten Bezeichner, da dies der Standardexport für die Datei ist und Sie sie beim Importieren beliebig benennen können, sodass defaultdie Variablenzuweisung nur in einem einzigen Schlüsselwort zusammengefasst wird.

Für mich ist dies nur eine von vielen Eigenheiten (Betonung der Redewendung (t)) des Typoskripts, die dazu führen, dass sich die Leute die Haare ausreißen und die Entwickler verfluchen. Vielleicht könnten sie daran arbeiten, verständlichere Fehlermeldungen zu finden.