1つのes6モジュールでクラスを作成し、それを別のモジュールにインポートする方法は？

Question

私は2つのファイル：User.jsとLogin.jsを持っています。ログインが成功した後、私はユーザークラスの静的logInメソッドを呼び出したいと思います。私には奇妙な行動があります。私は間違って何をしていますか？

ファイルの内容User.js：

// user/User.js 

// I also tried export default class User 
export class User { 
    static logIn (token) { 
    } 

    static logOut (token) { 
    } 

    static isAuthorized() { 
    } 
} 

そしてLogin.js：

// login/Login.js 

import React from 'react'; 
import GoogleLogin from 'react-google-login'; 
// I also tried import User from './../user/User'; 
// I also tried import {User} from './../user/User'; 
import * as User from './../user/User'; 

class Login extends React.Component { 

    constructor (props, context) { 
    super(props, context); 
    } 

    responseSuccess (googleUser) { 
    const idToken = googleUser.getAuthResponse().id_token; 
    User.logIn(idToken); 
    } 

/// 

} 

export default Login; 

私はインポートを使用して、私はこの動作を取得するこの方法をエクスポート：

ので、ユーザーは、オブジェクトでありますプロパティはUserです。このプロパティには、Userクラスのすべてのメソッドが含まれます。

私はUserオブジェクトでユーザークラスメソッドを取得するので、何らかの形でエクスポート/インポートすることはできますか？

メソッドを使用する方法は1つだけです：User.User.logIn()。

Answer 1

デフォルトのエクスポートを使用しているため、名前空間のインポート（* as User）では、クラスにアクセスするにはUser.defaultを使用する必要があります。代わりに

、デフォルトのインポートを使用します。

import User from './../user/User'; 

---

をしかし、あなたのスクリーンショットは、あなたが実際にexport class User { … }と名付け輸出ではなく、デフォルトのエクスポートをやっていることを示唆しています。あなたはそれを使用したい場合は、名前をインポートする必要があるだろう：

import {User} from './../user/User'; // short for {User as User} 

---

あなたはおそらくshouldn't be using a classとにかく静的メソッドのみからなる、言いました。複数の名前付き輸出

export function logIn(token) { 
} 
export function logOut(token) { 
} 
export function isAuthorized() { 
} 

を使用して、デフォルトのエクスポートを使用しているので

import * as User from './../user/User'; 

等User.logIn

Answer 2

としてそれらにアクセスするには、名前空間のインポートを使用し、指定する必要はありません別名：as。 the MDN docsで

import User from './../user/User'; 

さらに詳しい情報：

代わりに、モジュールのデフォルトのエクスポートをインポートするには、次の構文を使用します。

Answer 3

インポートユーザーfrom '/ ../ user/User ';

十分なはずです、あなたはインポート*言えば から `として、「『X』ファイルからの輸出の全てを取得し、一つにそれらを収集`と言うとき、そのファイル