react中定义变量并使用方式的介绍

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

class Packaging extends React.Component{ // react 类组件

    constructor(props) {

        super(props);

        this.state = {

          // 进行变量定义（会vue的同学：这个地方就相当于 data 的return里所定义的）

          // 例如

          name:'定义name'

        };

        this.getNameData();// 调用方法

    }

    // 定义方法-写这个方法是为了给大家操作一下怎么改变定义的数据

    getNameData() {

        http.get('接口名称').then(res => {

            // 第一种

            this.setState({ //  使用this.setState来进行改变变量

                name: res.data.name

            });

            console.log(this.state.dataObj) // 打印不到的

            // 第二种

            this.setState({

               name: res.data.name

            },() => {

              console.log(this.state.dataObj) // 可以打印到

            })

        }).catch(error => {

            console.error(error)

        })

    }

    render() {

        return  <div className="className">// className定义div的class名称

                    {this.state.name}

                </div>

    }

}

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

window._= {

        /**

         * 存储localStorage

         */

        setStore:(name, content) =>{

            if (!name) return;

            if (typeof content !== 'string') {

                content = JSON.stringify(content);

            }

            window.localStorage.setItem(name, content);

        },

        /**

         * 获取localStorage

         */

        getStore:(name) => {

            if (!name) return;

            return window.localStorage.getItem(name);

        },

        /**

         * 清除localStorage

         */

        clearStore:() => {

            window.localStorage.clear();

        },

        getQueryStringByName: function (name) {

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

            var r = window.location.search.substr(1).match(reg);

            var context = "";

            if (r != null)

                context = r[2];

            reg = null;

            r = null;

            return context == null || context == "" || context == "undefined" ? "" : context;

        }

}

1

import  "util/tool.jsx";