在React中引入js函数

本文将定义一个js文件,里面增加几个函数,然后在react的js文件里引用.

文件结构

1
2
3
4
5
6
[jimo@jimo-pc src]$ tree
.
├── test
│   └── Test.js
└── utils
    └── net.js

我们要做的就是在Test.js里引用net.js.

net.js

net.js里有封装的访问网络函数:注意export

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import axios from 'axios';
import qs from 'qs'; //对参数转化

// axios.defaults.baseURL = 'http://192.168.1.146:8082';

export function get(url, callback, errorHandler = null) {
    axios.get('http://192.168.1.146:8082' + url
    ).then(function (response) {
        if (response.data.ok === false) {
            console.log(response.data.msg);
            alert("msg:" + response.data.msg);
        } else {
            callback(response);
        }
    }).catch(function (error) {
        if (errorHandler) {
            errorHandler();
        } else {
            console.log(error);
            alert(error);
        }
    })
}

export function post(url, jsonParam, callback, errorHandler = null) {
    axios.post('http://192.168.1.146:8082' + url,
        qs.stringify(jsonParam)
    ).then(function (response) {
        if (response.data.ok === false) {
            console.log(response.data.msg);
            alert("msg:" + response.data.msg);
        } else {
            callback(response);
        }
    }).catch(function (error) {
        if (errorHandler) {
            errorHandler();
        } else {
            console.log(error);
            alert(error);
        }
    })
}

Test.js里引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import * as net from "../utils/net";

class TeaWC extends Component {

    constructor(props) {
        super(props);
        this.state = {
          xx : ''
        }
        this.myFun = this.myFun.bind(this);
    }

    myFun() {
        var t = this;
        net.get(url, function (response) {
            console.log(response)
            //...
        })
    }

    render() {
        return (
            <div>
                ...
            </div>
        )
    }
}

或则另一种引用方式:

1
2
3
4
5
6
import {get,post} from "../utils/net";

get(url, function (response) {
    console.log(response)
    //...
})