Javascript 为什么“导出默认常量”无效？

Why Is `Export Default Const` invalid?

提问by Kayote

I see that the following is fine:

我看到以下内容很好：

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

However, this is incorrect:

然而，这是不正确的：

export default const Tab = connect( mapState, mapDispatch )( Tabs );

Yet this is fine:

但这很好：

export default Tab = connect( mapState, mapDispatch )( Tabs );

Can this be explained please why constis invalid with export default? Is it an unnecessary addition & anything declared as export defaultis presumed a constor such?

可以解释一下为什么const无效export default吗？这是一个不必要的添加和任何声明为export default假定的东西const吗？

采纳答案by Paul S.

constis like let, it is a LexicalDeclaration(VariableStatement, Declaration) used to define an identifier in your block.

const就像let，它是一个LexicalDeclaration( VariableStatement, Declaration)，用于在您的块中定义标识符。

You are trying to mix this with the defaultkeyword, which expects a HoistableDeclaration, ClassDeclarationor AssignmentExpressionto follow it.

您正在尝试将其与default关键字混合使用，该关键字期望紧随其后的是HoistableDeclaration、ClassDeclaration或AssignmentExpression。

Therefore it is a SyntaxError.

因此它是一个SyntaxError。

---

---

If you want to constsomething you need to provide the identifier and not use default.

如果你想要const一些东西，你需要提供标识符而不是使用default.

exportby itself accepts a VariableStatementor Declarationto its right.

export本身接受其右侧的VariableStatement或声明。

---

---

AFAIK the export in itself should not add anything to your current scope.

AFAIK 导出本身不应该向您当前的范围添加任何内容。

---

---

The following is fineexport default Tab;

以下是好的export default Tab;

Tabbecomes an AssignmentExpressionas it's given the name default^?

Tab成为一个AssignmentExpression因为它的名字是default ^?

export default Tab = connect( mapState, mapDispatch )( Tabs );is fine

export default Tab = connect( mapState, mapDispatch )( Tabs );很好

Here Tab = connect( mapState, mapDispatch )( Tabs );is an AssignmentExpression.

这Tab = connect( mapState, mapDispatch )( Tabs );是一个AssignmentExpression。

回答by Adeel Imran

You can also do something like this if you want to export default a const/let, instead of

如果你想导出默认的 const/let，你也可以做这样的事情，而不是

const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent

You can do something like this, which I do not like personally.

你可以做这样的事情，我个人不喜欢。

let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);

回答by Kevin Danikowski

If the component name is explained in the file name MyComponent.js, just don't name the component, keeps code slim.

如果在文件名中解释了组件名称MyComponent.js，只需不要命名组件，保持代码精简。

import React from 'react'

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

Update: Since this labels it as unknown in stack tracing, it isn't recommended

更新：由于这在堆栈跟踪中将其标记为未知，因此不推荐

回答by Tom

Paul's answer is the one you're looking for. However, as a practical matter, I think you may be interested in the pattern I've been using in my own React+Redux apps.

保罗的答案就是您正在寻找的答案。但是，作为一个实际问题，我认为您可能对我在自己的 React+Redux 应用程序中使用的模式感兴趣。

Here's a stripped-down example from one of my routes, showing how you can define your component and export it as default with a single statement:

这是我的一个路由中的一个精简示例，展示了如何定义组件并使用单个语句将其导出为默认值：

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 { /* ... */ }

(Note: I use the term "Scene" for the top-level component of any route).

（注意：我使用术语“场景”来表示任何路由的顶级组件）。

I hope this is helpful. I think it's much cleaner-looking than the conventional connect( mapState, mapDispatch )( BareComponent )

我希望这是有帮助的。我认为它看起来比传统的要干净得多connect( mapState, mapDispatch )( BareComponent )

回答by GingerBeer

The answer shared by Paul is the best one. To expand more,

保罗分享的答案是最好的。为了扩大，

There can be only one default export per file. Whereas there can be more than one const exports. The default variable can be imported with any name, whereas const variable can be imported with it's particular name.

每个文件只能有一个默认导出。而可以有多个 const 导出。默认变量可以使用任何名称导入，而 const 变量可以使用其特定名称导入。

var message2 = 'I am exported';

export default message2;

export const message = 'I am also exported'

var message2 = '我已出口';

导出默认消息2；

export const message = '我也被导出了'

At the imports side we need to import it like this:

在导入端，我们需要像这样导入它：

import { message } from './test';

从'./test'导入{消息}；

or

或者

import message from './test';

从'./test'导入消息；

With the first import, the const variable is imported whereas, with the second one, the default one will be imported.

第一次导入时，会导入 const 变量，而第二次导入时，将导入默认变量。

回答by Mani Gandham

defaultis basically const someVariableName

default基本上是 const someVariableName

You don't need a named identifier because it's the default export for the file and you can name it whatever you want when you import it, so defaultis just condensing the variable assignment into a single keyword.

您不需要命名标识符，因为它是文件的默认导出，您可以在导入时随意命名，因此default只需将变量赋值压缩为单个关键字。

回答by Big Dog

To me this is just one of many idiosyncracies (emphasis on the idio(t) ) of typescript that causes people to pull out their hair and curse the developers. Maybe they could work on coming up with more understandable error messages.

对我来说，这只是打字稿的许多特质（强调 idio(t) ）之一，它导致人们拔出头发并诅咒开发人员。也许他们可以努力提出更容易理解的错误消息。