javascript - Varför är `Export Default Const` ogiltigt?

Jag ser att följande är bra:

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

Men detta är fel:

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

Ändå är detta okej:

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

Kan detta förklaras, tack, varför const är ogiltigt med export default? Är det ett onödigt tillägg och allt som deklareras som export default antas vara en const eller liknande?

Svar #1

const är som let, det är en LexicalDeclaration (VariableStatement, Declaration) som används för att definiera en identifierare i ditt block.

Du försöker blanda detta med default-nyckelordet, vilket förväntar sig en HoistableDeclaration, ClassDeclaration eller AssignmentExpression efter sig.

Därför är det ett SyntaxError.

Om du vill consta något måste du ange identifieraren och inte använda default.

export i sig accepterar ett VariableStatement eller Declaration till höger om sig.

Följande är okejexport default Tab;

Tab blir ett AssignmentExpression eftersom det ges namnet default ?

`export default Tab=connect( mapState, mapDispatch )( Tabs );` är okej

Här Tab=connect( mapState, mapDispatch )( Tabs ); är ett AssignmentExpression.

Uppdatering: Ett annat sätt att föreställa sig problemet

Om du försöker förstå detta konceptuellt och resonemanget ovan inte hjälper, tänk på det som "om default var en laglig identifierare och inte ett reserverat token, vad skulle vara ett annat sätt att skriva export default Foo; och export default const Foo=1;?"

I denna situation skulle det utökade sättet att skriva det vara

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

Det finns ett giltigt argument att expansionen borde vara något i stil med

// pseudocode, this thought experiment is not valid JS

export default const Foo = 1;
// would be like
const Foo = 1;
export const default = Foo;

Men detta skulle då bli tvetydigt enligt Sergeys kommentar, så det är mer meningsfullt att skriva detta mönster uttryckligen istället.

Svar #2

Du kan också göra något liknande om du vill exportera standard en const/let, istället för

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

Du kan göra något liknande detta, vilket jag personligen inte gillar.

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

Svar #3

Om komponentnamnet förklaras i filnamnet MyComponent.js, namnge bara inte komponenten, håller koden slimmad.

import React from 'react'

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

Uppdatering: Eftersom detta märker det som okänt i stackspårning rekommenderas det inte

Uppdatering 2: Jag har bara använt es5-versionen nedan eftersom den behåller namn på stacktraces och React dev-verktyg.

import React from 'react'

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

Svar #4

Svaret som delades av Paul är det bästa. För att utveckla mer,

Det kan bara finnas en standardexport per fil. Däremot kan det finnas mer än en const-export. Standardvariabeln kan importeras med vilket namn som helst, medan const-variabeln kan importeras med dess särskilda namn.

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

På importsidan behöver vi importera det så här:

import { message } from './test';

eller

import message from './test';

Med den första importen importeras const-variabeln medan med den andra importeras standardvariabeln.

Svar #5

Med export default exporterar du inte namnet på, i det här fallet, variabeln.

fel :

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

höger :

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

Du kan importera det med vilket namn du vill

Svar #6

Kort sagt

JavaScript stöder inte export default tillsammans med const.
export default kan användas tillsammans med expressions, functions och classes.

Fel :

export default const a = 10, b = 20;

Det är för att vi inte kan identifiera vilket som är standard mellan a och b vid importtidpunkten.

Höger

const a = 10, b = 20;
export default a;

Eller helt enkelt

Använd inte default med const:

export const a = 10, b = 20;

Observera: Även om endast 1 export default är tillåtet i en JavaScript-modul, är flera exports tillåtna.

Referens

Relaterade artiklar