web-dev-qa-db-ja.com

Export Default Constが無効なのはなぜですか？

私は以下が大丈夫だと思う：

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かそのようなものと推定されますか？

javascriptscopeexportconstdefault
234
Kayote

constはlet、 これはLexicalDeclaration （VariableStatement、Declaration）のようなもので、ブロック内で識別子を定義するために使用されます。

これを追うために、これをdefaultキーワード、 HoistableDeclaration、ClassDeclarationまたはAssignmentExpression が必要です。

したがって、それはSyntaxErrorです。

何かをconstしたい場合は、defaultを使用せずに識別子を指定する必要があります。

exportは、それ自体でVariableStatementまたはDeclarationを受け入れます。

私自身のエクスポート自体は、あなたの現在のスコープに何かを追加するべきではありません。

以下はfineexport default Tab;です

デフォルトという名前が付けられているので、TabはAssignmentExpressionになります ？

export default Tab = connect( mapState, mapDispatch )( Tabs );は大丈夫です

ここでTab = connect( mapState, mapDispatch )( Tabs );はAssignmentExpressionです。

222
Paul S.

デフォルトの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>);
31
Adeel Imran

コンポーネント名がファイル名MyComponent.jsで説明されている場合は、コンポーネントに名前を付けないでコードをスリムに保ちます。

import React from 'react'

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

ポールの答えはあなたが探しているものです。しかし、実際問題として、私が自分のReact + Reduxアプリで使ってきたパターンに興味があるかもしれません。

これは私のルートの1つから抜粋した例です。コンポーネントを定義し、それを1つのステートメントでデフォルトとしてエクスポートする方法を示します。

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 )よりずっときれいに見えると思います

6
Tom

パウロが共有した答えが一番いいのです。もっと拡大するには

ファイルごとにデフォルトのエクスポートは1つだけです。一方、複数のconstエクスポートがある可能性があります。デフォルト変数は任意の名前でインポートできますが、const変数は任意の名前でインポートできます。

var message2 = 'エクスポートしています';

デフォルトのメッセージ2をエクスポートします。

export const message = '私もエクスポートされています'

インポート側では、このようにインポートする必要があります。

'./test'から{message}をインポートします。

または

'./test'からメッセージをインポートします。

最初のインポートではconst変数がインポートされ、2番目のインポートではデフォルトの変数がインポートされます。

1
Bharat Raj

私にとって、これはTypeScriptの多くの特異性の1つ（idio（t）に重点を置いている）であり、人々が髪を引き抜いて開発者を呪う原因になっています。たぶん、彼らはより理解しやすいエラーメッセージを考え出すことに取り組むことができるでしょう。

0
Big Dog