javascript - How to create class in one es6 module and import it in another? - Stack Overflow

admin管理员组

文章数量:1379438

I have two files: User.js and Login.js. After login is successfull i want to call static logIn method of User class. I have strange behaviour. What am I doing wrong?

File contents User.js:

// user/User.js

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

  static logOut (token) {
  }

  static isAuthorized () {
  }
}

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

When I use import and export this way I get this behaviour:

So, User is an object with property User. This property contains all methods of class User.

Is it possible to somehow export/import class so I will get user class methods in User object?

Now there is only one way to use methods: User.User.logIn().

I have two files: User.js and Login.js. After login is successfull i want to call static logIn method of User class. I have strange behaviour. What am I doing wrong?

File contents User.js:

// user/User.js

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

  static logOut (token) {
  }

  static isAuthorized () {
  }
}

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

When I use import and export this way I get this behaviour:

So, User is an object with property User. This property contains all methods of class User.

Is it possible to somehow export/import class so I will get user class methods in User object?

Now there is only one way to use methods: User.User.logIn().

• javascript
• ecmascript-6
• es6-modules

Share Improve this question Follow edited Feb 3, 2017 at 12:34 Sharikov Vladislav asked Feb 2, 2017 at 21:14 Sharikov VladislavSharikov Vladislav 7,28999 gold badges5252 silver badges9090 bronze badges 3

• When you say import * as <NAME> from <LOC>, if says "take all of the exports from file 'x' and collect them into one object and export that object as <NAME>". Should work if you just change your import statement to import User from './../user/User' since the class is your default export – m_callens Commented Feb 2, 2017 at 21:17
• Yes, it is logical explanation. I understand it. The problem it does not work... I also tried import User from './../user/User', I just added one of the variants there. – Sharikov Vladislav Commented Feb 2, 2017 at 21:35
• The example and the screenshot show different code. – a better oliver Commented Feb 3, 2017 at 9:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You are using a default export, so with a namespace import (* as User) you'd have to use User.default to access the class.

Instead, use a default import:

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

---

However, your screenshot suggests that you're actually doing a named export with export class User { … }, not a default export. If you want to use that, you'd have to import the name:

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

---

That said, you probably shouldn't be using a class consisting of only static methods anyway. Use multiple named exports

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

and then use the namespace import

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

to access them as User.logIn etc.

Since you are using a default export, there is no need to specify an alias via as.

Instead, use the following syntax to import the default export of the module:

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

More info in the MDN docs.

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

should be enough, you dont have more exported values from that file

本文标签： javascriptHow to create class in one es6 module and import it in anotherStack Overflow