react怎么定義變量并使用

這篇“react怎么定義變量并使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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";

然后在其余的組件里面就可以訪問到這個變量對象：_

以上就是關于“react怎么定義變量并使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。