Почему `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
просто уплотняет присвоение переменной в одно ключевое слово.