2016-03-28 4 views
103

Я вижу, что следующее прекрасно:Почему `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 или такой?

ответ

120

const, как let, it is a LexicalDeclaration (ВыраженияПрисваивания, Декларация) используется для определения идентификатора в вашем блоке.

Вы пытаетесь смешать это с ключевым словом default, which expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression, чтобы следить за ним.

Таким образом, это SyntaxError.


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

export сама принимает Декларацию ВыраженияПрисваивания или на это право.

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


Следующая отлично export default Tab;

Tab становится ВыраженияПрисваивания как это дано имя по умолчанию?

export default Tab = connect(mapState, mapDispatch)(Tabs); прекрасно

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

+4

Ответ: как это стало ошибкой. Вопрос по-прежнему почему? Одна из причин, почему это предотвращает злоупотребление const таким образом: export default const a = 1, b = 3, c = 4; –

+1

'' AFAIK экспорт сам по себе не должен добавлять ничего в вашу текущую область действия ". Это не так точно, потому что' export const a = 1' добавляет 'a' в ваш текущий контекст. И даже с 'export default' в случае классов, потому что' export default class MyClass {} 'добавляет' MyClass' в ваш текущий контекст. – Ernesto

+1

@SergeyOrlov согласен, что это объясняет, как это порождает ошибку, но мало освещает, почему это необходимо. Хотя я не уверен, что это единственная причина, вы, вероятно, должны опубликовать это как отдельный ответ, а не комментарий к этому. – Herick

18

Вы также можете сделать что-то вроде этого, если вы хотите экспортировать по умолчанию константный/пусть вместо

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>); 
+2

'const MyComponent;' недопустимый синтаксис: 'const' должен быть назначен в том же самом выражении, в котором он определен. – configurator

+1

Мне жаль, что я плохой, я исправил эту вещь. –

3

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