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

Why Is `Export Default Const` invalid?

本文关键字：常量 无效 默认 为什么      更新时间：2023-09-26

我发现以下内容很好：

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

const类似于let，它是一个LexicalDeclaration（VariableStatement，Declaration），用于定义块中的标识符。

您正试图将其与default关键字混合使用，该关键字后面需要HoistableDeclaration、ClassDeclaration或AssignmentExpression。

因此，它是一个语法错误。

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

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

以下是很好的export default Tab;

Tab成为AssignmentExpression，因为它被赋予了默认名称

export default Tab = connect( mapState, mapDispatch )( Tabs );是良好的

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

更新：想象问题的另一种方式

如果你试图从概念上理解这一点，而上面的规范推理没有帮助，那么就把它想象成"如果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的评论，这将变得模棱两可，因此明确地编写这种模式更有意义。

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

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>);

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

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

更新：由于这在堆栈跟踪中将其标记为未知，因此不建议使用

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

import React from 'react'
export default function MyComponent(props) {
    return (<div id='static-page-template'>
        {props.children}
    </div>)
}
保罗给出的答案是最好的。为了扩大规模，

每个文件只能有一个默认导出。而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变量，而对于第二个导入，则将导入默认变量。

Paul的答案就是您要寻找的答案。然而，实际上，我想你可能对我在自己的React+Reux应用程序中使用的模式感兴趣。

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

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 ) 干净得多

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

错误：

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

右图：

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

您可以在任何您喜欢的名称上导入

default基本上是const someVariableName

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

相关文章：