Waarom is `Export Default Const` ongeldig?

Ik zie dat het volgende in orde is:

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

Dit is echter onjuist:

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

Toch is dit prima:

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

Kan dit worden uitgelegd waarom constongeldig is met export default? Is het een onnodige toevoeging & alles wat is gedeclareerd als export defaultwordt verondersteld een constof iets dergelijks te zijn?

Antwoord 1, autoriteit 100%

constis als let, het is een LexicalDeclaration(VariableStatement, Declaration) die wordt gebruikt om een identifier in je blok.

Je probeert dit te combineren met het defaultzoekwoord, die een HoistableDeclaration, ClassDeclarationof AssignmentExpressionverwacht om het te volgen.

Daarom is het een SyntaxError.

Als je iets wilt constmoet je de identifier opgeven en niet defaultgebruiken.

exportop zichzelf accepteert een VariableStatementof Declarationrechts ervan.

Het volgende is primaexport default Tab;

Tabwordt een AssignmentExpressionomdat het de naam default^krijgt?

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

Hier Tab = connect( mapState, mapDispatch )( Tabs );is een AssignmentExpression.

Update:een andere manier om het probleem voor te stellen

Als u dit conceptueel probeert te begrijpen en de bovenstaande specificatie-redenering niet helpt, beschouw het dan als “als defaulteen legale identificatie was en geen gereserveerde token, wat zou een andere manier zijn om export default Foo;en export default const Foo = 1;?”

te schrijven

In deze situatie zou de uitgebreide manier om het te schrijven zijn

// pseudocode, this thought experiment is not valid JS
export default Foo;
// would be like
export const default = Foo;
export default const Foo = 1;
// would be like
export const default const Foo = 1;
// so would the following line make sense?
const bar const Foo = 1;

Er is een geldig argument dat de uitbreiding zou moetenzoiets zijn als

// pseudocode, this thought experiment is not valid JS
export default const Foo = 1;
// would be like
const Foo = 1;
export const default = Foo;

Dit zou dan echter dubbelzinnig worden per Sergey’s commentaar, dus het is logischer om dit patroon expliciet te schrijven.

Antwoord 2, autoriteit 16%

Je kunt ook zoiets doen als je standaard een const/let wilt exporteren, in plaats van

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

Je kunt zoiets doen, wat ik persoonlijk niet leuk vind.

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

Antwoord 3, autoriteit 6%

Als de componentnaam wordt uitgelegd in de bestandsnaam MyComponent.js, noem dan gewoon geen naam voor de component, zodat de code slank blijft.

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

Update: aangezien dit het label als onbekend in stacktracering markeert, wordt het niet aanbevolen

Update 2: ik gebruik alleen de onderstaande es5-versie omdat deze de namen op stacktraces houdt en dev-tools reageert.

import React from 'react'
export default function MyComponent(props) {
    return (<div id='static-page-template'>
        {props.children}
    </div>)
}

Antwoord 4, autoriteit 3%

Het antwoord van Paul is het beste. Om meer uit te breiden,

Er kan slechts één standaardexport per bestand zijn. Terwijl er meer dan één constante export kan zijn. De standaardvariabele kan met elke naam worden geïmporteerd, terwijl de const-variabele met zijn specifieke naam kan worden geïmporteerd.

var message2 = 'I am exported';
export default message2;
export const message = 'I am also exported'

Aan de importzijde moeten we het als volgt importeren:

import { message } from './test';

of

import message from './test';

Bij de eerste import wordt de variabele const geïmporteerd, terwijl bij de tweede import de standaard wordt geïmporteerd.

Antwoord 5, autoriteit 2%

Pauls antwoord is het antwoord dat u zoekt. Praktisch gezien denk ik echter dat je misschien geïnteresseerd bent in het patroon dat ik heb gebruikt in mijn eigen React+Redux-apps.

Hier is een uitgekleed voorbeeld van een van mijn routes, die laat zien hoe u uw component kunt definiëren en als standaard kunt exporteren met een enkele instructie:

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

(Opmerking: ik gebruik de term ‘Scène’ voor de component op het hoogste niveau van een route).

Ik hoop dat dit nuttig is. Ik denk dat het er veel schoner uitziet dan de conventionele connect( mapState, mapDispatch )( BareComponent )

Antwoord 6

defaultis in feite const someVariableName

Je hebt geen benoemde identifier nodig omdat dit de standaard export voor het bestand is en je kunt het een naam geven die je maar wilt wanneer je het importeert, dus defaultis gewoon de toewijzing van de variabele in een enkele zoekwoord.

Antwoord 7

Voor mij is dit slechts een van de vele eigenaardigheden (nadruk op de idio(t) ) van typoscript die ervoor zorgt dat mensen hun haren uittrekken en de ontwikkelaars vervloeken. Misschien zouden ze kunnen werken aan het bedenken van meer begrijpelijke foutmeldingen.