Wie erstellt man eine Klasse in einem es6 Modul und importiert sie in ein anderes?

Question

Ich habe zwei Dateien: User.js und Login.js. Nach erfolgreichem Login möchte ich die statische logIn Methode der Benutzerklasse aufrufen. Ich habe seltsames Verhalten. Was mache ich falsch?

Dateiinhalt User.js:

// user/User.js 

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

    static logOut (token) { 
    } 

    static isAuthorized() { 
    } 
} 

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

Wenn ich Import verwenden und exportieren diese Weise kann ich dieses Verhalten bekommen:

So, Benutzer ist ein Objekt mit Eigenschaft User. Diese Eigenschaft enthält alle Methoden der Klasse Benutzer.

Ist es möglich, irgendwie Klasse zu exportieren/importieren, damit ich Benutzerklassenmethoden in User Objekt bekomme?

Jetzt gibt es nur eine Möglichkeit, Methoden zu verwenden: User.User.logIn().

Answer 1

Sie verwenden einen Standardexport, so dass Sie bei einem Namespace-Import (* as User) User.default verwenden müssen, um auf die Klasse zuzugreifen.

Verwenden Sie stattdessen eine Standard-Import:

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

---

jedoch Ihr Screenshot lässt vermuten, dass Sie tatsächlich einen benannten Export mit export class User { … }, kein Standard-Export zu tun. Wenn Sie das verwenden möchten, sollten Sie den Namen importieren müssen:

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

---

Das heißt, Sie wahrscheinlich shouldn't be using a class nur aus statischen Methoden sowieso. mehrere benannte Exporte verwenden

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

und verwenden Sie dann den Namespace Import

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

zuzugreifen, sie als User.logIn usw.

Answer 2

Da Sie eine Standard-Export verwenden, gibt es keine Notwendigkeit zu geben ein Alias ​​über as.

Verwenden Sie stattdessen die folgende Syntax, um den Standard Export des Moduls zu importieren:

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

Mehr Infos in the MDN docs.

Answer 3

importieren Benutzer von './ ../ Benutzer/Benutzer ';

sollte genug sein, müssen Sie nicht aus dieser Datei mehr exportierten Werte haben