Mengapa `Ekspor Default Konstan` tidak valid?

Saya melihat bahwa yang berikut ini baik-baik saja:

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

Namun, ini tidak benar:

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

Namun ini baik-baik saja:

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

Bisakah ini dijelaskan, mengapa consttidak valid export default? Apakah ini merupakan tambahan yang tidak perlu & sesuatu yang dinyatakan sebagai export defaultdianggap constatau itu?

constseperti let, itu adalah LexicalDeclaration ( VariableStatement, Declaration ) yang digunakan untuk mendefinisikan pengidentifikasi di blok Anda.

Anda mencoba mencampur ini dengan defaultkata kunci, yang mengharapkan HoistableDeclaration, ClassDeclaration atau AssignmentExpression untuk mengikutinya.

Karena itu, ini adalah SyntaxError .

Jika Anda ingin constsesuatu, Anda harus memberikan pengenal dan tidak digunakan default.

exportdengan sendirinya menerima VariableStatement atau Deklarasi di sebelah kanannya.

AFAIK ekspor itu sendiri tidak boleh menambahkan apa pun ke ruang lingkup Anda saat ini.

Berikut ini baik-baik sajaexport default Tab;

Tabmenjadi AssignmentExpression karena diberi nama default ^?

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

Berikut Tab = connect( mapState, mapDispatch )( Tabs );adalah Tugas Penugasan .

Anda juga dapat melakukan sesuatu seperti ini jika Anda ingin mengekspor default / let, alih-alih

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

Anda dapat melakukan sesuatu seperti ini, yang saya tidak suka secara pribadi.

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

Jika nama komponen dijelaskan dalam nama file MyComponent.js, jangan beri nama komponen, jaga agar kode tetap ramping.

import React from 'react'

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

Pembaruan : Karena ini label sebagai tidak dikenal dalam pelacakan tumpukan, itu tidak dianjurkan

Jawaban Paul adalah yang Anda cari. Namun, secara praktis, saya pikir Anda mungkin tertarik dengan pola yang saya gunakan di aplikasi React + Redux saya sendiri.

Berikut ini adalah contoh sederhana dari salah satu rute saya, yang menunjukkan bagaimana Anda dapat mendefinisikan komponen Anda dan mengekspornya sebagai default dengan satu pernyataan:

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

(Catatan: Saya menggunakan istilah "Adegan" untuk komponen tingkat atas dari rute apa pun).

Saya harap ini bermanfaat. Saya pikir ini jauh lebih bersih daripada yang konvensionalconnect( mapState, mapDispatch )( BareComponent )

Jawaban yang dibagikan oleh Paul adalah yang terbaik. Untuk memperluas lebih lanjut,

Hanya ada satu ekspor standar per file. Padahal bisa ada lebih dari satu ekspor const. Variabel default dapat diimpor dengan nama apa pun, sedangkan variabel const dapat diimpor dengan nama tertentu itu.

var message2 = 'Saya diekspor';

ekspor pesan default2;

export const message = 'Saya juga diekspor'

Di sisi impor kita perlu mengimpornya seperti ini:

impor {message} dari './test';

atau

impor pesan dari './test';

Dengan impor pertama, variabel const diimpor sedangkan, dengan yang kedua, yang default akan diimpor.

default pada dasarnya const someVariableName

Anda tidak memerlukan pengenal yang dinamai karena ini adalah ekspor default untuk file tersebut dan Anda dapat menamainya apa pun yang Anda inginkan ketika Anda mengimpornya, jadi defaulthanya mengkondensasi penugasan variabel menjadi satu kata kunci tunggal.

Bagi saya ini hanyalah salah satu dari banyak keanehan (penekanan pada idio (t)) naskah yang menyebabkan orang menarik rambut mereka dan mengutuk pengembang. Mungkin mereka bisa bekerja dengan membuat pesan kesalahan yang lebih dimengerti.