React
文章平均质量分 80
记录React学习过程
Jay丶萧邦
uview维护组成员;LOL全能型混子;Jay&Vae的忠实粉丝;骑电车贼6的前端攻城狮;未完待续...
展开
-
React:有关a标签控制台警告的一些问题
近几日在写react项目的时候,发现了一些问题,特此记录!原创 2023-02-06 15:07:20 · 767 阅读 · 0 评论 -
React:安装配置使用scss
项目采用creat-react-app脚手架初始化项目,默认采用css语法,但是在隐藏的webpack配置中是支持css,sass,scss的。版本信息:react:18.2.0。原创 2023-02-02 11:44:05 · 4058 阅读 · 0 评论 -
React:前端配置代理解决跨域问题
跨域是一个老生常谈的问题,不再过多的去解释什么是跨域了,着重记录在React项目中怎么去解决跨域,当然对于前端开发而言,绝大部分的跨域问题,都是通过代理的方式解决的!而代理适用的场景是:在生产环境中不发生跨域,但在开发环境中会发生跨域!因此,我们只需要在开发环境中使用前端代理解决跨域即可,又称为开发代理!在React中解决跨域,毫无疑问,也是使用开发代理解决!目录产生跨域问题解决跨域问题:简单方式:复杂方式:举例,我们需要在React项目中使用axios,请求这个网址拿数据页面点击获取数据,在原创 2022-06-20 14:24:14 · 6230 阅读 · 1 评论 -
React:条件渲染的几种方式
目录前言基础配置1. 声明一个函数,返回对应的内容2. 使用元素变量3. 使用三目运算符4. 使用与运算符&&总结完整示例说起来条件编译,可能这个词有一点点陌生,但是如果之前接触过vue写法的话,那就很明白了;就是v-if ,当满足对应的条件,展示对应的内容!那么在React中的条件渲染当然采用的不是v-if,需要用自己React的条件渲染方式!页面展示 页面展示:页面展示:页面展示:页面展示:我这边开发中使用频率比较高的,应该是第三种和第四种: 三目运算符,用于一个值为真或者原创 2022-06-03 22:15:00 · 1032 阅读 · 0 评论 -
React:事件处理,点击事件(无参&有参)
目录上一篇:准备:无参数传递:错误写法:1. 利用bind更改this指向,生成新的函数,比较麻烦2. 简化1方法,在点击时使用bind更改this指向3. 利用回调函数4.使用箭头函数,强烈推荐,简单实用有参数写法:1. 利用bind更改this指向传递参数2. 利用回调函数传递参数个人推荐写法:上一篇:React:使用Refs的正确姿势,三种方式调用_Jay丶千珏的博客-CSDN博客本篇记录总结react的事件处理,点击事件,总分为两.原创 2022-05-25 21:30:00 · 650 阅读 · 0 评论 -
React:使用Refs的正确姿势,三种方式调用
上篇:React:props常用验证_Jay丶千珏的博客-CSDN博客前言:在React中,很典型的父子组件通信方式就是使用props,当时在某些特殊的情况下,我们需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素。为了更好的解决这个问题,React提供了解决的办法:ref。通过往组件或者dom元素上绑定ref属性,我们可以拿到此实例,以此来解决更多的事情!关于ref的使用场景,react官方中,是这么说的:1. 字符串形原创 2022-05-23 22:00:00 · 1273 阅读 · 0 评论 -
React:props常用验证
前言:需要注意的是,在React v15.5版本之后,props的验证已经转移到了prop-types库中。如果之前写过vue项目的,在关于组件传值这块,我们一般都会为props设置它的类型,是string或者number或者object等等,还会去给它一个default默认值,如果此参数必传,会把required设置为true等等这些,其实设置这些验证的作用主要是为了更加规范数据,以此来确保我们的程序,组件可以按照预想的那样正常的执行使用,当我们传入不符合验证规则的数据时,控制台就会直接抛出错误原创 2022-05-20 22:00:00 · 1622 阅读 · 0 评论 -
React:声明组件的方式,看这篇就够了
React声明组件的方式有两种:分别是函数式声明组件和类式声明组件;写法很简单,只是刚接触的话,可能还是写的不是很习惯,多写写就ok了!老样子,我们还是直接新建一个html就好!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div原创 2022-05-03 17:11:29 · 1851 阅读 · 0 评论 -
React:JSX的语法规则,一文就够了
这两天看到一个交流群的前端人,使用react,jsx语法,把他折磨的生不如死;主要是因为未使用过react,更未使用过jsx,纯纯的赶鸭子上架,感觉可太难了!话不多说,我们直接进入正题!什么是JSX?要想写jsx的语法,那么就得先了解jsx是什么,有什么用?借用百度的话:JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,.原创 2022-04-28 20:53:20 · 2131 阅读 · 0 评论