react怎么定义变量并使用

发布时间:2023-02-14 09:42:21 作者:iii
来源:亿速云 阅读:153

这篇“react怎么定义变量并使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react怎么定义变量并使用”文章吧。

react定义变量并使用

这里面涉及到了

都写有详细的注释大家可详细观看适合刚学习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怎么定义变量并使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 在你学习React之前必备的JavaScript基础有哪些
  2. React项目怎么从Javascript到Typescript

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:Flutter配置代理抓包如何实现

下一篇:docker search命令如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》