我认为以下内容是可以的:

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的东西都被假定为const或类似的?


当前回答

const类似于let,它是一个LexicalDeclaration (VariableStatement, Declaration),用于在块中定义标识符。

你试图将它与default关键字混合使用,default关键字后面会跟着一个吊装声明、ClassDeclaration或AssignmentExpression。

因此它是一个SyntaxError。


如果你想要const的东西,你需要提供标识符,而不是使用default。

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


下面是fineexport default Tab;

Tab成为一个AssignmentExpression,因为它被赋予的名称默认?

导出默认Tab = connect(mapState, mapDispatch)(Tab);很好

这里Tab = connect(mapState, mapDispatch)(Tabs);是一个赋值表达式。


更新:用不同的方式来想象问题

如果您试图从概念上理解这一点,而上面的规范推理没有帮助,可以将其想象为“如果default是一个合法的标识符,而不是一个保留令牌,那么使用哪种不同的方式来编写export default Foo;导出默认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的评论,这将变得模糊,因此显式地编写这个模式更有意义。

其他回答

如果组件名称是在MyComponent.js文件中解释的,那就不要给组件命名,这样可以保持代码简洁。

import React from 'react'

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

更新:由于在堆栈跟踪中将其标记为未知,因此不建议这样做

更新2:我只使用下面的es5版本,因为它将名称保存在堆栈跟踪和react开发工具上。

import React from 'react'

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

默认是const somvariablename

你不需要命名标识符,因为它是文件的默认导出,当你导入它时,你可以给它起任何你想要的名字,所以default只是将变量赋值浓缩成一个关键字。

const类似于let,它是一个LexicalDeclaration (VariableStatement, Declaration),用于在块中定义标识符。

你试图将它与default关键字混合使用,default关键字后面会跟着一个吊装声明、ClassDeclaration或AssignmentExpression。

因此它是一个SyntaxError。


如果你想要const的东西,你需要提供标识符,而不是使用default。

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


下面是fineexport default Tab;

Tab成为一个AssignmentExpression,因为它被赋予的名称默认?

导出默认Tab = connect(mapState, mapDispatch)(Tab);很好

这里Tab = connect(mapState, mapDispatch)(Tabs);是一个赋值表达式。


更新:用不同的方式来想象问题

如果您试图从概念上理解这一点,而上面的规范推理没有帮助,可以将其想象为“如果default是一个合法的标识符,而不是一个保留令牌,那么使用哪种不同的方式来编写export default Foo;导出默认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的评论,这将变得模糊,因此显式地编写这个模式更有意义。

保罗分享的答案是最好的。为了进一步扩展,

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

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

在导入端,我们需要像这样导入它:

import { message } from './test';

or

import message from './test';

在第一个导入中,导入const变量,而在第二个导入中,将导入默认的const变量。

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