Dlaczego `Export Default Const` jest nieprawidłowy?

Widzę, że wszystko jest w porządku:

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

Jest to jednak niepoprawne:

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

Ale to jest w porządku:

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

Czy można to wyjaśnić, dlaczego constjest nieważny export default? Czy jest to niepotrzebny dodatek i cokolwiek zadeklarowane jako export defaultdomniemane const?

constjest jak let, to jest Deklaracja Lexical ( VariableStatement, Deklaracja ) używana do definiowania identyfikatora w twoim bloku.

Próbujesz połączyć to ze defaultsłowem kluczowym, które oczekuje , że podąży za nim deklaracja HoistableDeclaration, ClassDeclaration lub AssignmentExpression .

Dlatego jest to błąd SyntaxError .

Jeśli chcesz constczegoś, musisz podać identyfikator, a nie używać default.

exportsam przyjmuje zmienne oświadczenie lub deklarację po swojej prawej stronie.

AFAIK sam eksport nie powinien niczego dodawać do twojego obecnego zakresu.

Wszystko w porządkuexport default Tab;

Tabstaje się wyrażeniem AssignmentExpression, ponieważ ma domyślną nazwę ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); jest w porządku

Tutaj Tab = connect( mapState, mapDispatch )( Tabs );jest AssignmentExpression .

Możesz również zrobić coś takiego, jeśli chcesz wyeksportować domyślną const / let zamiast

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

Możesz zrobić coś takiego, czego osobiście nie lubię.

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

Jeśli nazwa komponentu jest wyjaśniona w nazwie pliku MyComponent.js, po prostu nie nazywaj komponentu, kod pozostanie wąski.

import React from 'react'

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

Aktualizacja : Ponieważ jest to nieznane w śledzeniu stosu, nie jest zalecane

Odpowiedź Paula jest tą, której szukasz. Jednak ze względów praktycznych myślę, że możesz być zainteresowany wzorcem, którego używałem w moich własnych aplikacjach React + Redux.

Oto uproszczony przykład z jednej z moich tras, pokazujący, jak można zdefiniować komponent i wyeksportować go jako domyślny za pomocą pojedynczej instrukcji:

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

(Uwaga: używam terminu „Scena” dla komponentu najwyższego poziomu dowolnej trasy).

Mam nadzieję, że to jest pomocne. Myślę, że jest znacznie czystszy niż konwencjonalnyconnect( mapState, mapDispatch )( BareComponent )

Odpowiedź udzielona przez Paula jest najlepsza. Aby rozwinąć więcej,

Może być tylko jeden domyślny eksport na plik. Podczas gdy może być więcej niż jeden stały eksport. Zmienną domyślną można zaimportować pod dowolną nazwą, natomiast zmienną const można zaimportować o określonej nazwie.

var message2 = „Jestem eksportowany”;

eksportuj domyślną wiadomość2;

export const message = „Jestem również eksportowany”

Po stronie importu musimy go zaimportować w następujący sposób:

import {message} z './test';

lub

zaimportuj wiadomość z „./test”;

Przy pierwszym imporcie zmienna const jest importowana, podczas gdy przy drugim importowana jest zmienna domyślna.

default jest w zasadzie const someVariableName

Nie potrzebujesz nazwanego identyfikatora, ponieważ jest to domyślny eksport pliku i możesz go nazwać, kiedy chcesz, podczas importowania, więc defaultpo prostu kondensuj przypisanie zmiennej do jednego słowa kluczowego.

Dla mnie jest to tylko jedna z wielu osobliwości (nacisk na idio (t)) maszynopisu, który powoduje, że ludzie wyciągają włosy i przeklinają twórców. Być może mogliby opracować bardziej zrozumiałe komunikaty o błędach.