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

Question

我有两个文件：User.js和Login.js。登录成功后我想调用User类的静态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类的所有方法。

是否有可能以某种方式导出/导入类，因此我将在User对象中获取用户类方法？

现在只有一种方法可以使用方法：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指定别名。

而是使用以下语法导入模块的默认导出：

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

the MDN docs中的更多信息。

Answer 3

从'./../ user / User'导入用户;

应该足够了，你没有更多来自该文件的导出值