为什么 `Export Default Const` 无效？

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。

The following is fineexport default Tab;

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

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

这里 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;

但是，根据，这会变得模棱两可，因此显式编写此模式更有意义。

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

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

（注意：我使用术语 "Scene" 来表示任何路由的顶级组件）。

希望对您有所帮助。我认为它比传统的 connect( mapState, mapDispatch )( BareComponent )

看起来更干净

Answer 4

如果在文件名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 5

保罗分享的答案是最好的。展开更多，

每个文件只能有一个默认导出。而可以有多个 const 出口。 default 变量可以用任何名称导入，而 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 6

default 基本上是 const someVariableName

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

Answer 7

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

错误：

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

对：

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

你可以用任何你喜欢的名字导入它

为什么 `Export Default Const` 无效？

Why Is `Export Default Const` invalid?

javascript

scope

default

export

constants