Почему "экспорт по умолчанию 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 или такой?

5 ответов


const Как let, это LexicalDeclaration (VariableStatement, Декларация) используется для определения идентификатора в блоке.

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

поэтому SyntaxError.


если вы хотите 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>);

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


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

import React from 'react'

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

ответ, разделяемый Павлом, является лучшим. Чтобы расширить больше,

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

var message2 = 'я экспортирован';

экспорт по умолчанию message2;

экспорт const сообщение = 'я также экспортируется'

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

импорт { сообщение } от './ test';

или

импорт сообщений из./ test';

при первом импорте импортируется переменная const, а при втором-будет импортирована переменная по умолчанию.