Почему `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 или такое?

Ответ 1

const похож на let, это LexicalDeclaration (VariableStatement, Declaration), используемый для определения идентификатор в вашем блоке.

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

Поэтому это SyntaxError.


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

export сам по себе принимает к нему значение VariableStatement или декларацию.


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


Следующее прекрасно [t26 >

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

export default Tab = connect( mapState, mapDispatch )( Tabs ); отлично

Здесь Tab = connect( mapState, mapDispatch )( Tabs ); является выражением присваивания.

Ответ 2

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

Ответ 3

Если имя компонента объясняется в имени файла MyComponent.js, просто не называйте компонент, сохраняя код в тонком виде.

import React from 'react'

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

Ответ 4

Ответ Павла - это тот, который вы ищете. Однако, как практический вопрос, я думаю, вас может заинтересовать шаблон, который я использовал в своих собственных приложениях 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 )

Ответ 5

Ответ пола - лучший. Чтобы расширить больше,

Для каждого файла может быть только один экспорт по умолчанию. Принимая во внимание, что может быть больше чем один постоянный экспорт. Переменная по умолчанию может быть импортирована с любым именем, тогда как переменная const может быть импортирована с любым именем.

var message2 = 'I am exported';

экспортировать сообщение по умолчанию2;

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

Что касается импорта, нам нужно импортировать его следующим образом:

import { message } from './test';

или

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

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

Ответ 6

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

Ответ 7

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

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