iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react中定义变量并使用方式
  • 765
分享到

react中定义变量并使用方式

react定义变量react变量react变量使用 2023-02-13 18:02:41 765人浏览 八月长安
摘要

目录React定义变量并使用这里面涉及到了react全局变量的设置总结react定义变量并使用 这里面涉及到了 1、变量如何定义2、变量如何进行改变3、方法如何调用 都写有详细的注释

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._= {
        
        setStore:(name, content) =>{
            if (!name) return;
            if (typeof content !== 'string') {
                content = JSON.stringify(content);
            }
            window.localStorage.setItem(name, content);
        },
        
        getStore:(name) => {
            if (!name) return;
            return window.localStorage.getItem(name);
        },
        
        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";

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: react中定义变量并使用方式

本文链接: https://www.lsjlt.com/news/195868.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react中定义变量并使用方式
    目录react定义变量并使用这里面涉及到了react全局变量的设置总结react定义变量并使用 这里面涉及到了 1、变量如何定义2、变量如何进行改变3、方法如何调用 都写有详细的注释...
    99+
    2023-02-13
    react定义变量 react变量 react变量使用
  • react怎么定义变量并使用
    这篇“react怎么定义变量并使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react怎么定义变量并使用”文章吧。rea...
    99+
    2023-07-05
  • CSS中怎么定义变量并使用
    小编给大家分享一下CSS中怎么定义变量并使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS 中原生的变量定义语法是:--,变量使用语法是:var(--) ;...
    99+
    2023-06-27
  • 详解Golang变量的定义方式
    Golang变量的定义方法详解,需要具体代码示例 在Golang编程语言中,变量是程序中存储和操作数据的基本单元。变量的定义是程序设计中最基础的操作之一。本文将详细介绍Golang中变量的定义方法,并提供具体...
    99+
    2024-01-18
  • sqlserver中怎么定义变量并赋值
    在SQL Server中,可以使用DECLARE语句来定义变量并使用SET语句来为变量赋值。 例如,以下是一个定义变量并赋值的示例:...
    99+
    2024-04-09
    sqlserver
  • php中定义变量的方法
    非常抱歉,由于您没有提供文章标题,我无法为您生成一篇高质量的文章。请您提供文章标题,我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-15
  • C++中怎么定义和使用变量
    这篇文章将为大家详细讲解有关C++中怎么定义和使用变量,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。C++定义变量有两种主要的做法 符号常量 (#define) 常值变量 (const)符号...
    99+
    2023-06-17
  • 在 MySQL 中使用用户定义的变量
    让我们了解什么是用户变量以及如何在 MySQL 中使用它们。我们还将看到规则 -用户变量被写为@var_name。这里,“var_name”指的是变量名,由字母数字字符、.、_和$组成。用户变量名可以包含其他字符(如果被引号引起来)作为字符...
    99+
    2023-10-22
  • 不同变量类型的定义方式在Golang中
    Golang中不同类型变量的定义方式,需要具体代码示例 在Golang中,我们可以使用不同的方式来定义不同类型的变量。本文将介绍Golang中常见的几种变量类型的定义方式,并提供相应的代码示例。 1.整型变量...
    99+
    2024-01-18
    var关键字 变量类型说明符 短变量声明
  • mysql怎么定义变量并赋值
    在MySQL中,可以使用SET语句来定义变量并赋值。以下是定义变量并赋值的语法:```SET @变量名 = 值;```例如,定义一个...
    99+
    2023-08-17
    mysql
  • vue中如何使用定义好的变量设置css样式
    小编给大家分享一下vue中如何使用定义好的变量设置css样式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况。实现第一种情况...
    99+
    2023-06-29
  • vue中使用定义好的变量设置css样式详解
    目录前言实现第一种情况第二种情况 语法方法一方法二总结前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况。 实现 第一种...
    99+
    2024-04-02
  • oracle定义变量并赋值的方法是什么
    在Oracle中,可以使用PL/SQL语言来定义变量并赋值。PL/SQL是Oracle数据库的编程语言,它结合了SQL语句和编程结构...
    99+
    2023-09-15
    oracle
  • mybatis xml中定义变量
    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 mybatis定义全局变量只需要配置一下即可,那如何在mybatis xml文件中定义局部变量...
    99+
    2023-09-03
    mybatis xml mysql bind 标签
  • JavaScript定义变量的方法
    这篇文章将为大家详细讲解有关JavaScript定义变量的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-14
  • MySQL 中的用户定义变量与局部变量?
    用户定义的变量也称为会话特定变量。它是一种松散类型变量,可以在会话中的某个位置进行初始化,并包含用户定义变量的值,直到会话结束。用户定义变量以符号 @ 为前缀。例如:@anyVariableName;有两种方法可以初始化用户定义的变量。您可...
    99+
    2023-10-22
  • jquery定义变量用法
    在前端开发中,经常需要使用jquery这个js库来实现各种功能。而jquery中的变量定义与使用方法也是我们需要掌握的一部分知识。本文将讲解jquery中变量的定义及使用方法。一、jquery变量定义在jquery中,定义变量使用var关键...
    99+
    2023-05-23
  • 如何在css中如何定义使用变量
    今天就跟大家聊聊有关如何在css中如何定义使用变量,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*)  ;...
    99+
    2023-06-15
  • TypeScript中定义变量方式以及数据类型详解
    目录TypeScript定义变量变量声明格式变量类型推导JS和TS的数据类型TS中使用JS的数据类型number类型boolean类型string类型Array类型Object类型S...
    99+
    2024-04-02
  • Springboot如何获取配置文件application.yml中自定义的变量并使用
    前言:在写项目中我们经常要将同样的变量在不同的文件中写无数次,这样修改起来要一通好找,非常不方便,平常都会写一个工具类存入自己的变量进行调用取值,但是呢,懒得写咋办,写了还要注入,注...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作