react技术栈及全家桶
文章平均质量分 59
react技术栈相关搭配:antd、antd pro、antd-mobie等
搬砖的前端
这个作者很懒,什么都没留下…
展开
-
React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理
## React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理方案: - 第一种:node 方式 - 第二种:cross-env 方式 - 第三种:webpack serve方式 - 第四种:webpack-dev-server 方式 - 第五种:原创 2022-02-17 19:42:03 · 4481 阅读 · 1 评论 -
react-router-dom v6 版本使用内容详解
react-router-dom v6 版本使用内容详解1.路由组件 (1-1) v6 方式一 react-router-dom 常规 (1-2) v6 方式二 react-router-dom 使用 useRoutes2.页面跳转 (2-1) Link 组件跳转 (2-2) useNavigate hooks跳转,代替useHistory3.获取路由的参数 (3-1) useParams 获取动态路由的值 (3-2) useSearchParams 获取查询字符串的值原创 2022-02-16 20:08:22 · 9920 阅读 · 9 评论 -
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw
react使用 postcss-px-to-viewport 适配移动端px或者pc端自动转vw原创 2022-01-14 12:15:28 · 7073 阅读 · 8 评论 -
react项目支持使用less处理方式
react项目支持使用less处理方式,配置webpack v5版本在配置webpack.config.js方案原创 2022-01-13 12:05:34 · 695 阅读 · 0 评论 -
React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案
## React:tabs或标签页自定义右击菜单内容,支持内嵌iframe关闭菜单方案不管是react、vue还是原生js,原理是一样的## 场景前端自定义标签页,一个标签对应一个路由页面,通过切换标签快速切换不同应用或者页面## 代码#### 变量```javascriptstate = { contextMenuIndex: '', // 右击菜单索引 contextMenuPosition: { // 右击菜单定位信息 clientX: '',原创 2024-06-24 15:16:38 · 365 阅读 · 0 评论 -
GIT提交:.husky/pre-commit: line 2: .husky/_/husky.sh: No such file or directory
## GIT提交:.husky/pre-commit: line 2: .husky/_/husky.sh: No such file or directory一些项目添加了代码提交校验和格式化,在windows下会忽略.husky下文件提交导致git数据丢失。### 处理方案:#### 方案01:补齐缺失的文件1.1 项目根目录下:【.husky】下新建文件夹【\_】【\_】下新建【.gitignore】和【husky.sh】![在这里插入图片描述](https://img-blog.cs原创 2024-05-20 18:02:57 · 447 阅读 · 0 评论 -
react:antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案
## react:antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案记录antd版本:v4这是一个很隐蔽的bug,仅输入框聚焦后鼠标滑动经过输入框时,输入框的值会自动加减。不聚焦、不经过输入框不显示。**解决方案:**1. 不使用 Input 组件设置 type="number",改用 InputNumber2. InputNumber 组件时,一定不要设置:type="number"经测试,antd的原创 2024-04-10 17:53:38 · 585 阅读 · 0 评论 -
vue、react、uniapp配置全局域名、环境变量NODE_ENV、--mode区分开发环境和正式环境
前端项目开发,不同项目环境使用不同的api接口域名(或ip)。不需要通过反复注释代码来解决接口环境问题。## 方法一:根据 window.location.host```javascriptconst baseURL = window.location.host == 'url01' ? 'url01' : 'url02';// 建议:url01是正式环境,url02是测试环境或者本地调开发用(有预生产环境的再继续写)```## 方法二:根据 process.env.NODE_ENV(需原创 2022-01-05 19:37:31 · 3279 阅读 · 0 评论 -
React 阻止事件冒泡
React 阻止事件冒泡 处理子元素是事件 添加:e.stopPropagation();function childrenClick(e){ e.stopPropagation(); // ... 其他}原创 2022-05-07 21:21:38 · 1425 阅读 · 1 评论 -
React项目滚动元素 页面到顶部 指定位置几种方案
React项目滚动元素 页面到顶部 指定位置几种方案原创 2022-03-02 19:24:28 · 10339 阅读 · 0 评论 -
React使用react-redux搭配redux流程和介绍详解
React使用react-redux搭配redux流程和介绍 简化处理方案原创 2022-03-02 11:50:35 · 1760 阅读 · 0 评论 -
React使用redux流程和介绍 简化处理方案
React使用redux流程和介绍 简化处理方案原创 2022-02-28 21:27:46 · 722 阅读 · 0 评论 -
React Uncaught SyntaxError: Unexpected token ‘<‘ 报错
线上项目:本地正常,线上有问题。重新打包,发版,完事。如果index.html 有js,则:<script type="text/babel" src="%PUBLIC_URL%/jweixin-1.6.0.js"></script>尽量配置 - 前端不缓存配置index.html / head 内添加:<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"原创 2022-02-24 16:25:24 · 2101 阅读 · 0 评论 -
React antd antd-mobile修改Switch组件尺寸大小
antd-mobile修改Switch组件尺寸大小。官方没有提供尺寸选择,自己手写一个个样式很麻烦。直接用css3 缩放最简单组件:<Switch checked={checkedStatus} onClick={handleSwitch} />解决方案:.am-switch{ transform: scale(1.4) !important;}用缩放是最简单的,一行样式,否则要设置三四处,太麻烦。此方案适合:React、Vue、小程序、uniapp等 更改下class原创 2022-02-22 17:44:32 · 787 阅读 · 0 评论 -
React中使用SVG文件显示成图片
SVG 没法直接渲染都img。一般引用插件SVG文件优缺点优点:不失真, 放大缩小图像都很清晰SVG文件是纯粹的XML, 也是一种DOM结构缺点:不能修改宽高,使图片拉伸(一些项目需要变形显示覆盖,如全屏背景图等)方案一:使用 create-react-app脚手架 创建react项目react创建项目不止一种,用 create-react-app脚手架创建,自带支持svg。适合初建项目。已创建的 往下看其他方案安装:create-react-appnpm install -g原创 2022-02-22 15:01:07 · 4147 阅读 · 0 评论 -
React 复制到粘贴板 兼容各种浏览器 copy-to-clipboard、原生js、clipboard方案
React 复制到粘贴板 兼容各种浏览器。copy-to-clipboard,原生js处理,clipboard方案原创 2022-02-21 16:43:03 · 5548 阅读 · 0 评论 -
React更改document.title浏览器标题名字react-router-dom V6路由处理方案
React更改document.title浏览器标题名字react-router-dom V6路由处理方案。**react项目修改修改document.title浏览器标题名字**此文只介绍react-router-dom的**V6 版本**处理方案**react-router-dom路由创建和使用方式:**[点我另一个博客](https://blog.csdn.net/weixin_44461275/article/details/122239426)**V5 react-router-dom原创 2022-02-09 15:42:06 · 5756 阅读 · 11 评论 -
antd-mobile-v2图片选择器ImagePicker压缩图片处理方案
antd-mobile v2版本 在图片选择器后,没有压缩图片选项。自己写一下官方文档:https://antd-mobile-v2.surge.sh/components/image-picker-cn/canvas压缩图片常用的是:压缩图片宽高、透明度 这两个。如果要高级压缩,可查看: 我的另一个博客直接看代码,这只是压缩案例。若项目需要前端上传腾讯云桶,可查看我的其他博客import React, { useState } from 'react';import { ImagePicker,原创 2022-02-10 11:52:39 · 1694 阅读 · 0 评论 -
react antd-mobile v2图片选择器ImagePicker压缩图片上传腾讯云COS处理方案
本文介绍:react移动端 antd-mobile V2版本使用图片选择器 ImagePicker时,前端压缩图片并且上传腾讯云COS如果不上传腾讯云,纯选择压缩,可查看:antd-mobile-v2图片选择器ImagePicker压缩图片处理方案后端出接口获取cos配置信息,文中GET 请求接口可看 另一个博客axios常用请求封装腾讯云JSSDK:https://cloud.tencent.com/document/product/436/11459安装腾讯云cos注意腾讯云后台管理,配置co原创 2022-02-10 14:59:41 · 1472 阅读 · 0 评论 -
React中react-router引用和使用方案
概念理解:react-router和react-router-dom有什么区别?react-router 是跨平台的,内置通用组件和通用Hooks。基本上指v4及以前的时候用的react-router-dom 是在react-router基础上提供了Link和NavLink,而且依赖history库提供了两个浏览器端适用的BrowserRouter和HashRouter。一般都用的react-router-dom进行路由管理。说明:react-router没人直接用里面的方法了,都是用react-r原创 2022-02-10 17:59:25 · 1003 阅读 · 0 评论 -
React移动端h5日历组件react-h5-calendar周日历 月日历 周视图 月视图自定义标记点
React移动端h5日历组件能用的插件不多,不想自己手写,只能使用插件了。react-h5-calendar还不错,长的不丑,切换也流畅。文档:github简易介绍:https://github.com/kokiy/react-h5-calendar另外补充:react-hash-calendar插件文档github详细地址:https://github.com/TangSY/react-hash-calendarDEMO:(实际不抖)查看:或浏览器打开:https://kokiy.gi原创 2022-02-15 14:52:23 · 4550 阅读 · 3 评论 -
React配置微信jssdk关闭公众号分享等
前文:react本身是单页面,通过路由加载组件显示页面。微信官方案例说明,在安卓端没问题,但是在ios下异常。不能关闭,提示签名错误。文档:微信官方文档:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3复制微信打开看效果:https://www.weixinsxy.com/jssdk/解决原理:一:ios下每次传递的url配置参数,是最初第一个进来时候的全连接原创 2022-02-14 15:22:43 · 1349 阅读 · 1 评论 -
React更改document.title浏览器标题名字react-router-dom v5路由处理方案
React更改document.title浏览器标题名字react-router-dom V5路由处理方案.**react-router-dom路由创建和使用方式:**[点我另一个博客](https://blog.csdn.net/weixin_44461275/article/details/122239426)**V6 react-router-dom 版本处理方案:**[点我另一个博客](https://blog.csdn.net/weixin_44461275/article/details/原创 2022-01-25 19:07:16 · 2592 阅读 · 0 评论 -
react项目配置@指向src文件夹
react项目配置@指向src文件夹react项目没有和vue一样有 @指向src文件夹,需要手动配置。配置了之后,@ 就代表 src 目录,就不用自己 …/暴露项目配置项(任选一种)npm方式: npm run ejectcnpm方式: cnpm run eject yarn方式: yarn eject注意:此步骤不可逆 ,最好备份下项目再进行。若报错,有git的可以通过 git add . git commit -m '暴露项目配置项' npm run eject原创 2022-01-19 18:54:01 · 1929 阅读 · 1 评论 -
ReferenceError: React is not defined报错解决方案
ReferenceError: React is not defined报错解决方案。npm run eject 暴露项目配置项,会删除babel的配置项。需要手动加回来原创 2022-01-19 17:37:47 · 7603 阅读 · 0 评论 -
antd-mobile-v2日期选择器
antd-mobile 常用的日期选择器,很多常用的地方需要用到。官网文档:https://antd-mobile-v2.surge.sh/components/date-picker-cn/比较简单,直接看代码引用:import React, { useState, useEffect } from 'react';import { DatePicker } from 'antd-mobile';import "./index.less";// import CalendarIcon f原创 2022-01-19 14:15:08 · 3273 阅读 · 0 评论 -
react中各类轮播swiper、走马灯Carousel使用(ant.design、antd-mobile、swiper整合文档)
react的 轮播图(要么叫做:走马灯)方案:要么引用ui框架,要么引用插件,要么自己手写(不建议,要处理兼容,有坑)。**本文目录:****一:antd-mobile(V2)使用Carousel走马灯****二:antd-mobile(V5)使用Swiper轮播****三:ant design 使用Swiper轮播****四:引用swiper插件**## 一:antd-mobile(V2) 走马灯Carousel[点击查看官方案例](https://antd-mobile-v2.surg原创 2022-01-10 15:22:58 · 8887 阅读 · 4 评论 -
Error: A <Route> is only ever to be used as the child of <Routes> element, never rendereddirectly
Error: A < Route > is only ever to be used as the child of < Routes > element, never rendereddirectly.Please wrap your < Route > in a < Routes >.原创 2022-01-05 11:02:31 · 6285 阅读 · 1 评论 -
react-router-dom v5 和 v6 路由引用和使用方式
react-router-dom路由引用和使用方式**react-router** 是跨平台的,内置通用组件和通用Hooks。**react-router-dom** 是在react-router基础上提供了Link和NavLink,而且依赖history库提供了两个浏览器端适用的BrowserRouter和HashRouter。一般都用的react-router-dom进行路由管理。**注意v6 改版 和原来的v5略有不同**原创 2022-01-04 19:07:35 · 2709 阅读 · 0 评论 -
react中axios引用以及实例封装常见拦截器请求方式
react中axios引用以及实例封装常见拦截器请求方式原创 2021-12-30 11:46:38 · 2871 阅读 · 0 评论 -
react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案
useState的数组,遍历请求异步接口,追加参数后,更新设置原数组方案01. 可改造 setArr为function方案02. 封装使用useState的回调函数方案03:【推荐】useEffect + es6中的Promise.all()处理(复杂任务也适用)方案04:useEffect + es5中的回调函数callback处理(逻辑有点绕,因要固定排序)方案05:useEffect + useState回调函数写法(数据量大的时候需要额外测试处理).1.可改造 setArr为funct原创 2021-11-19 18:14:54 · 4987 阅读 · 0 评论 -
react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤
npm、cnpm、yarn 搭建react + js 或者 react + ts(tsx)创建 react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤原创 2021-11-12 17:01:23 · 6046 阅读 · 1 评论 -
react样式引用的几种方式
react 样式写法有几种,以下列举常用方式:1. 导入css、less等文件// js部分import React from 'react';import './index.css'export default () => { return ( <> <p>原来颜色</p> <p className="red">引用后样式</p> // 变量控制 <p classNa原创 2021-11-12 15:29:16 · 1488 阅读 · 1 评论 -
react循环调用useState同步处理方案
目录:场景介绍循环调用useState同步处理方案(添加数据)1. 回调函数 useState(data) 改成:useState(data => 处理data)2. 抽离函数外使用变量循环调用usesate内,再调接口添加到原数据方案(添加数据+异步接口)1. 可改造 setArr为function2. 封装使用useState的回调函数3. 借用useEffect监听变化推荐阅读:react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案:https:/原创 2021-11-11 18:48:23 · 9610 阅读 · 3 评论