Почему "экспорт по умолчанию 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, а при втором-будет импортирована переменная по умолчанию.