在javascript React中导入自定义帮助器类

时间:2017-10-13 11:58:36

标签: javascript reactjs

我试图创建一个名为 helpers.js 的自定义类,如下所示:

class Httprequest{
    constructor(type, url, username, password,email){
        this.type = type;
        this.url = url;
        this.request = new XMLHttpRequest();
        this.username = username;
        this.password = password;
        this.email = email;
    }
    static sendPostRequest(){

        // function(method,url,async,user,password);
        this.request.open(this.type,this.url);
        this.request.setRequestHeader('Content-Type' ,'application/x-www-form-urlencoded');
        const data = encodeURI('username=' + this.username + '&'+
                                'password=' + this.password + '&'+
                                'email=' + this.email);
        this.request.send(data);
        if(this.request.readyState === 4){
            const status = this.request.status;
                if(status === 201){
                    return this.request.status;
                }else{
                    return "Failed creating account"
                }
        }
    }

}

export default Httprequest;

然后我尝试在我的React Component中导入名为 Projects.js

的类
import Httprequest from 'helpers.js';

我收到的错误如下: 编译失败。

./src/components/Projects.js
Module not found: Can't resolve 'helpers.js' in 'C:\Users\Account\Desktop\front\frontend\src\components'

两个文件都在同一个文件夹中,是什么给出的?

3 个答案:

答案 0 :(得分:1)

你可以尝试一下:

import Httprequest from './helpers.js';

您需要明确指出您当前的文件夹。

答案 1 :(得分:1)

以下是所有类型的导入语法:

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

导入的问题是,如果在同一目录中,则需要使用./helpers.js。它与UNIX文件系统结构相同。

答案 2 :(得分:0)

试试这个:

 import Httprequest from './helpers.js';