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

Question

我看到以下内容很好：

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 或类似的东西？

Answer 1

const 就像 let, it is a LexicalDeclaration (VariableStatement, Declaration) 用于在你的块中定义一个标识符。

您正在尝试将其与 default 关键字、which expects a HoistableDeclaration, ClassDeclaration or AssignmentExpression 混合以跟随它。

因此它是一个SyntaxError。

---

如果您想const 某些东西，您需要提供标识符而不是使用default。

export 本身接受 VariableStatement 或 Declaration 在其右侧。

---

以下就可以了export default Tab;

Tab 成为一个 AssignmentExpression，因为它被赋予了名称 default ^?

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

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

---

更新：想象问题的不同方式

如果您试图从概念上理解这一点并且上面的规范推理没有帮助，请将其视为 “如果 default 是合法标识符而不是保留令牌，那么会有什么不同的方式写export default Foo;和export default const Foo = 1;？”

在这种情况下，扩展的写法是

// pseudocode, this thought experiment is not valid JS

export default Foo;
// would be like
export const default = Foo;

export default const Foo = 1;
// would be like
export const default const Foo = 1;
// so would the following line make sense?
const bar const Foo = 1;

有一个有效的论点，扩展应该类似于

// pseudocode, this thought experiment is not valid JS

export default const Foo = 1;
// would be like
const Foo = 1;
export const default = Foo;

但是，这会因Sergey's comment 而变得模棱两可，因此改为显式编写此模式更有意义。

Answer 2

如果你想导出默认的 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>);

Answer 3

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

import React from 'react'

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

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

更新 2：我只使用下面的 es5 版本，因为它在堆栈跟踪和反应开发工具上保留名称。

import React from 'react'

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

Answer 4

Paul 分享的答案是最好的。要展开更多，

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

var message2 = 'I am exported';
export default message2;
export const message = 'I am also exported'

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

import { message } from './test';

或

import message from './test';

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

Answer 5

Paul 的答案就是您要找的答案。但是，实际上，我认为您可能对我在自己的 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 )看起来更干净@

Answer 6

default 基本上就是const someVariableName

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