为什么`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,它是用于在块中定义标识符的LexicalDeclaration(VariableStatement,Declaration).

您正在尝试将此与default关键字混合使用,该关键字需要使用HoistableDeclaration,ClassDeclaration或AssignmentExpression.

因此它是一个SyntaxError.

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

export它本身接受一个VariableStatement或声明.

AFAIK导出本身不应该为您当前的范围添加任何内容.

以下是好的export default Tab;

Tab成为AssignmentExpression,因为它的名称是默认的 ^？

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

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

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>

Answer 4

保罗分享的答案是最好的。为了扩大，

每个文件只能有一个默认导出。而可以有多个 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

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

错误的：

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

正确的：

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

您可以使用任何您喜欢的名称导入它

Answer 6

保罗的答案是你正在寻找的答案.但是,实际上,我认为您可能对我在自己的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 7

default 基本上是 const someVariableName

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