Я вижу, что это нормально:

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 недопустимо с по умолчанию для экспорта? Является ли это ненужным дополнением и все, что объявлено как по умолчанию для экспорта, считается const или что-то подобное?

Ответы (6)

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

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

Следовательно, это SyntaxError.


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

экспорт сам по себе принимает VariableStatement или Объявление справа.


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

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

экспорт по умолчанию Tab = connect (mapState, mapDispatch) (Tabs); отлично

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


Обновление: Другой способ представить проблему

Если вы пытаетесь концептуально понять это, и рассуждения, приведенные выше, не помогают, подумайте об этом как о ", если по умолчанию был допустимым идентификатором, а не зарезервированным токеном, что бы быть другим способом записи экспорт по умолчанию Foo; и экспорт по умолчанию const Foo = 1;? "

В этой ситуации расширенный способ записи будет

// псевдокод, этот мысленный эксперимент недействителен JS

экспорт по умолчанию Foo;
// было бы как
экспорт const по умолчанию = Foo;

по умолчанию для экспорта const Foo = 1;
// было бы как
экспорт const по умолчанию const Foo = 1;
// так будет ли смысл в следующей строке?
const bar const Foo = 1;

Имеется допустимый аргумент, расширение должно быть чем-то вроде

// псевдокод, этот мысленный эксперимент недействителен JS

по умолчанию для экспорта const Foo = 1;
// было бы как
const Foo = 1;
экспорт const default = Foo;

Однако это может стать неоднозначным из-за комментария Сергея, поэтому имеет смысл написать этот шаблон явно вместо этого.

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

import React from 'react'

export default (props) =>
    
{props.children}

Обновление: поскольку при трассировке стека он помечается как неизвестный, это не рекомендуется

Обновление 2: Я использовал только версию es5 ниже, так как она сохраняет имена на трассировках стека и реагирует на инструменты разработки.

import React from 'react'

export default function MyComponent(props) {
    return (
{props.children}
) }

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

const MyComponent = ({ attr1, attr2 }) => (

Now Export On other Line

); export default MyComponent

Можно сделать что-то подобное, что лично мне не нравится.

let MyComponent;
export default MyComponent = ({ }) => (

Now Export On SameLine

);

по умолчанию в основном const someVariableName

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

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

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

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

var message2 = 'Я экспортирован';
экспортировать сообщение по умолчанию2;
export const message = 'Я также экспортирован'

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

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

или

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

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

2022 WebDevInsider