react中定義變量並使用方式

react定義變量並使用

這裡面涉及到瞭

  • 1、變量如何定義
  • 2、變量如何進行改變
  • 3、方法如何調用

都寫有詳細的註釋大傢可詳細觀看適合剛學習react的新同學

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>
    }
}

react全局變量的設置

新建一個 util文件夾 —> tool.jsx

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

在入口文件app.jsx裡面引入

import  "util/tool.jsx";

然後在其餘的組件裡面就可以訪問到這個變量對象:_

總結

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: