Чому "Експорт за замовчуванням Const" недійсний?

Я бачу, що таке добре:

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

Однак це неправильно:

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

І все це добре:

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

Чи можна це пояснити, будь ласка, чому constце недійсне export default? Це зайве доповнення та що-небудь заявлене як export defaultприпущене constчи таке?

constце як let, це лексичне декларування ( VariableStatement, декларація) ) використовується для визначення ідентифікатора в вашому блоці.

Ви намагаєтесь змішати це з defaultключовим словом, яке очікує HoistableDeclaration, ClassDeclaration або AssignmentExpression .

Тому це SyntaxError .

Якщо ви хочете constщось, вам потрібно вказати ідентифікатор, а не використовувати default.

exportсама по собі приймає змінну державу або декларацію праворуч.

AFAIK сам експорт не повинен нічого додати до вашої нинішньої сфери.

Далі добреexport default Tab;

Tabстає AssignmentExpression, оскільки йому надано ім'я за замовчуванням ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); добре

Ось Tab = connect( mapState, mapDispatch )( Tabs );це ВираженіеПрісваіваніе .

Ви також можете зробити щось подібне, якщо замість цього потрібно експортувати const / let за замовчуванням

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

Ви можете зробити щось подібне, що особисто мені не подобається.

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

Якщо ім'я компонента пояснено в імені файлу MyComponent.js, просто не називайте його, він зберігає код тонкий.

import React from 'react'

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

Оновлення . Оскільки це позначає його як невідоме при відстеженні стека, це не рекомендується

Відповідь Павла - та, яку ви шукаєте. Однак, на практиці, я думаю, що вам може бути цікавий шаблон, який я використовував у своїх власних програмах React + Redux.

Ось зведений приклад з одного з моїх маршрутів, який показує, як ви можете визначити свій компонент та експортувати його за замовчуванням за допомогою одного оператора:

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

(Примітка. Я використовую термін "Сцена" для компонента верхнього рівня будь-якого маршруту).

Я сподіваюся, що це корисно. Я думаю, що це набагато чистіше, ніж звичайнеconnect( mapState, mapDispatch )( BareComponent )

Відповідь, яку поділив Павло, найкраща. Щоб розширити більше,

На файл може бути лише один експорт за замовчуванням. Тоді як експорт може бути більш ніж одним. Змінна за замовчуванням може бути імпортована з будь-яким ім'ям, тоді як змінна const може бути імпортована з її конкретним іменем.

var message2 = 'Мене експортує';

експорт повідомлення за замовчуванням2;

export const message = 'Я також експортуюсь "

Що стосується імпорту, нам потрібно імпортувати його так:

імпорт {message} з './test';

або

імпорт повідомлення з './test';

При першому імпорті імпортується змінна const, тоді як при другому - імпортується змінна.

default в основному const someVariableName

Вам не потрібен ідентифікований ідентифікатор, тому що це експорт файлу за замовчуванням, і ви можете називати його всім, що ви хочете, імпортуючи його, тому defaultце просто конденсує призначення змінної в одне ключове слово.

Для мене це лише одна з багатьох ідіосинкратій (наголос на idio (t)) машинопису, яка змушує людей виривати волосся та проклинати розробників. Можливо, вони могли б працювати над зрозумілими повідомленнями про помилки.