为什么“导出默认Const”无效?

小开

最佳答案

const类似于let，是一个LexicalDeclaration (VariableStatement,声明)用于定义块中的标识符。

您尝试将此与default关键字混合，，期望一个吊带声明，ClassDeclaration或AssignmentExpression跟随它。

因此它是SyntaxError。

如果你想要const，你需要提供标识符，而不是使用default。

export本身接受它右边的VariableStatement或宣言。

下面是export default Tab;

Tab变成了AssignmentExpression，因为它被命名为默认的 ^?

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

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

另一种想象问题的方式

如果您试图从概念上理解这一点，而上面的规范推理没有帮助，请将其视为“如果#EYZ0是一个合法的标识符，而不是一个保留的标记，那么#EYZ1和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;

然而，对于谢尔盖的评论，这将变得模糊，因此显式地编写这个模式更有意义。

小开

如果你想导出默认值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中解释的，那么就不要命名组件，以保持代码简洁。

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 exports。默认变量可以用任何名称导入，而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变量，而在第二个导入中，将导入默认的const变量。

小开

default基本上就是const someVariableName

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

小开

使用export default，在本例中，您不导出变量的名称。

错误的:

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

正确的:

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

您可以在任何名称上导入它