[英]How to create class in one es6 module and import it in another?
I have two files: User.js
and Login.js
. 我有两个文件: User.js
和Login.js
。 After login is successfull i want to call static logIn
method of User class. 登录成功后,我想调用User类的静态logIn
方法。 I have strange behaviour. 我有奇怪的行为。 What am I doing wrong? 我究竟做错了什么?
File contents User.js : 文件内容User.js :
// user/User.js
// I also tried export default class User
export class User {
static logIn (token) {
}
static logOut (token) {
}
static isAuthorized () {
}
}
// 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
. 因此,User是一个具有User
属性的对象。 This property contains all methods of class User. 此属性包含User类的所有方法。
Is it possible to somehow export/import class so I will get user class methods in User
object? 是否可以以某种方式导出/导入类,以便在User
对象中获得用户类的方法?
Now there is only one way to use methods: User.User.logIn()
. 现在只有一种使用方法的方法: User.User.logIn()
。
You are using a default export, so with a namespace import ( * as User
) you'd have to use User.default
to access the class. 您正在使用默认导出,因此使用名称空间导入( * as User
),您必须使用User.default
来访问该类。
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. 但是,您的屏幕快照表明您实际上是在使用export class User { … }
进行命名导出,而不是默认导出。 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. 以User.logIn
等身份访问它们
Since you are using a default export, there is no need to specify an alias via as
. 由于您使用的是默认导出,因此无需通过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 . 有关更多信息,请参见MDN文档 。
import User from './../user/User'; 从“ ./../user/User”导入用户;
should be enough, you dont have more exported values from that file 应该足够了,您没有从该文件导出更多的值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.