广告位联系
返回顶部
分享到

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

JavaScript 来源:互联网 作者:佚名 发布时间:2023-02-14 21:17:29 人浏览
摘要

react定义变量并使用 这里面涉及到了 1、变量如何定义 2、变量如何进行改变 3、方法如何调用 都写有详细的注释大家可详细观看适合刚学习react的新同学 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

react定义变量并使用

这里面涉及到了

  • 1、变量如何定义
  • 2、变量如何进行改变
  • 3、方法如何调用

都写有详细的注释大家可详细观看适合刚学习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>

    }

}

react全局变量的设置

新建一个 util文件夾 ---> tool.jsx

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;

        }

     

}

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

1

import  "util/tool.jsx";

然后在其余的组件里面就可以访问到这个变量对象:_


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/weixin_43609391/article/details/114977960
相关文章
  • 基于JavaScript编写一个翻卡游戏
    前言 首先将这个游戏需求拆分成三个部分: 翻卡动画 生成随机分布数组 点击事件 翻卡动画 假如我们的盒子模型不是个二维的平面,而是
  • react中定义变量并使用方式的介绍
    react定义变量并使用 这里面涉及到了 1、变量如何定义 2、变量如何进行改变 3、方法如何调用 都写有详细的注释大家可详细观看适合刚学习
  • Three.js Interpolant实现动画插值的介绍

    Three.js Interpolant实现动画插值的介绍
    这个类主要是用来实现插值,常用于动画。 可以把这个类理解为是一个数学函数,给定一个自变量,要返回对应的函数值。只是,在我们定
  • HTML页面中使用Vue示例进阶(快速学会上手Vue)
    Vue是用于构建用户界面的渐进式JavaScript框架。特色:构建用户界面数据变成界面;渐进式Vue可以自底向上逐层的应用。 Vue有两种使用方式,
  • umi插件开发仿dumi项目自动生成导航栏实现
    前面我们已经完成了页面布局和页面路由,现在我们的导航栏还是自己写死在代码中,现在我们来改造成自动根据页面路由来生成导航栏。
  • umi插件开发仿dumi项目实现页面布局

    umi插件开发仿dumi项目实现页面布局
    上一章我们已经完成/docs目录下文件自动生路由功能,本章我们将在此基础上,实现自动生成页面导航的功能。 使用默认模板提供的layout展
  • umi插件开发仿dumi项目实现基础路由解析

    umi插件开发仿dumi项目实现基础路由解析
    umi默认约定在/src/pages添加的(j|t)sx?文件会自动加载为路由。同样我们希望实现在某个目录下添加的markdown文件自动加载成为路由直接访问,本
  • js实现兔年转圈圈动画的代码

    js实现兔年转圈圈动画的代码
    兔年到了,兔年大吉祥,为了庆祝这份喜庆的兔年,今天我们设计一个兔子转圈圈的动画模拟吧。希望大家可以得到我的祝福和好运哦。。
  • Angular8升级至Angular13遇到的问题解决

    Angular8升级至Angular13遇到的问题解决
    根据项目需求,需要把Angular版本从8升级到13,无法从8直接升至13,需要一级一级的升级,本文介绍了在升级Angular版本的时候的一种报错和解
  • Vue3跨域解决方案实例介绍
    vue项目配置代理 vue.config.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies:
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计