如何在一个es6模块中创建类并将其导入另一个模块？

Question

我有两个文件:User.js和Login.js.登录成功后我想调用logInUser类的静态方法.我有奇怪的行为.我究竟做错了什么？

文件内容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类的所有方法.

有可能以某种方式导出/导入类,所以我将在User对象中获取用户类方法？

现在只有一种方法可以使用方法:User.User.logIn().

Answer 1

您正在使用默认导出,因此使用命名空间import(* as User),您必须使用它User.default来访问该类.

而是使用默认导入:

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

但是,您的屏幕截图表明您实际上正在使用命名导出export class User { … },而不是默认导出.如果要使用它,则必须导入名称:

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

也就是说,您可能不应该使用仅包含静态方法的类.使用多个命名导出

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

然后使用命名空间导入

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

以User.logIn等方式访问它们