Почему `Export Default 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, это LexicalDeclaration ( ВыраженияПрисваивания, декларация ) используется для определения идентификатора в вашем блоке.

Вы пытаетесь смешать это с defaultключевым словом, которое ожидает, что HoistableDeclaration, ClassDeclaration или AssignmentExpression последуют за ним.

Следовательно, это ошибка синтаксиса .

Если вы хотите constчто-то, вы должны предоставить идентификатор, а не использовать default.

exportсам по себе принимает VariableStatement или декларацию справа от себя.

AFAIK экспорт сам по себе не должен ничего добавлять к вашей текущей области.

Следующее хорошоexport default Tab;

Tabстановится выражением AssignmentExpression, так как ему присваивается имя по умолчанию ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); Это хорошо

Вот Tab = connect( mapState, mapDispatch )( Tabs );выражение AssignmentExpression .

Вы также можете сделать что-то вроде этого, если вы хотите экспортировать по умолчанию 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;

экспортировать константное сообщение = 'Я также экспортирован'

Что касается импорта, нам нужно импортировать его так:

import {message} из './test';

или

импортировать сообщение из «./test»;

При первом импорте импортируется переменная const, тогда как со вторым импортируется переменная по умолчанию.

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

Вам не нужен именованный идентификатор, потому что это экспорт по умолчанию для файла, и вы можете называть его как хотите, когда импортируете его, поэтому defaultпросто уплотняете присвоение переменной в одно ключевое слово.

Для меня это всего лишь одна из многих специфических особенностей (акцент на idio (t)) машинописи, которая заставляет людей вырывать волосы и проклинать разработчиков. Возможно, они могли бы работать над более понятными сообщениями об ошибках.