react
cvory
这个作者很懒,什么都没留下…
展开
-
XLSX插件使用 — 导入导出(含中文表头)(React+Antd 对上传表格做数据格式验证)
ReactAntdesignXLSX由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。原创 2023-02-10 15:34:43 · 4918 阅读 · 1 评论 -
页面指引 IntroJS在React+Next中的使用 (解决初始化时未渲染的dom如何查找)
react版本页面指引,IntroJS的使用原创 2022-06-17 17:53:33 · 531 阅读 · 1 评论 -
Hooks 中如何获取先前的 props 以及 state
Hooks 中如何获取先前的 props 以及 state原创 2022-06-14 19:34:24 · 487 阅读 · 0 评论 -
React项目指定项目启动的Host域名(UMI版本),指定域名与指定端口号报错
我有一篇写的指定Host域名:https://blog.csdn.net/qq_40593656/article/details/120745490项目代理配置:我在项目中指定了端口号80,启动项目时,指定了host域名在本地的host配置里,对于在这个域名后面加了端口号:xxxx.com:80以上就是我的bug复现背景,此时我跑项目无法启动Bug原因一般域名是默认的80端口,如果项目本身就指定了80端口号,端口号会被冲突占用, 可以试试,把端口号改成其他,就可以启动项目。本地的ho原创 2021-12-22 15:21:52 · 2200 阅读 · 0 评论 -
Umi-request 创建多个request文件,但拦截器相互污染
需求业务上的需要,request的配置上区别很大,所以建了两个request请求文件,对应的接口调用对应的request问题在两个文件的拦截器中log,会发现发起一个请求,两个拦截器都有进入Code两个文件不好演示,使用放在一个文件,建两个实例 const http1 = extend(); const http2 = extend(); const responseInterceptor = response => { console.log('hello world');原创 2021-10-11 10:53:44 · 1289 阅读 · 0 评论 -
UmiJS+React 配置不同环境变量(配置UMI_ENV)
需求给项目配置不同环境,然后在项目里,可以通过这个环境来动态处理一下逻辑,或者后台服务地址Code在package.json里,写不同环境的启动命令行和build命令行"start:dev": "cross-env UMI_ENV=dev umi dev","start:test": "cross-env UMI_ENV=test MOCK=none umi dev","start:pre": "cross-env UMI_ENV=prod umi dev","build:test原创 2021-10-09 18:07:43 · 5991 阅读 · 0 评论 -
UmiJs+React 配置项目启动端口号
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-10-09 16:19:20 · 1094 阅读 · 0 评论 -
使用umi脚手架搭建项目后,页签一直显示 ant design Pro,且页面搜索无结果
问题描述使用umi脚手架搭建项目后,页签一直显示 ant design Pro,且页面搜索无结果脚手架安装命令yarn create umi myapp解决方案config文件夹下defaultSettings.js配置中没有配置title属性出现原因在生成页签时,如果未配置title属性,默认显示ant design Pro,这也是为什么全局搜索后无结果。但是如果不想要带页签,可以将设置 title:''...原创 2021-09-03 16:21:06 · 675 阅读 · 1 评论 -
@umijs/runtime“ does not exist in container
问题复现操作1.使用umi脚手架搭建项目yarn create umi myapp2.将里面的插件,layout等配置进行清理后,安装插件以及启动项目yarn installnpm run start3.将当前项目作为模板,除开node_modules ,复制为另一个项目,安装插件后启动就会出现'@umijs/runtime" does not exist in container'的问题解决方案删除src 下 .umi 文件原因.umi是临时文件夹,但是它是匹配当前项目插件的版本原创 2021-09-03 16:01:55 · 6515 阅读 · 5 评论 -
React Hooks 父页面 调用子组件方法
需求在父页面中调用子组件中的方法运用的ApiuseRef,useCallback,useImperativeHandle父页面:对组件进行ref赋值组件使用useImperativeHandle把需要对父组件暴露的方法包起来在组件内,对这个方法的使用和其他方法没有区别父组件的调用...原创 2021-06-30 17:51:01 · 513 阅读 · 0 评论 -
umi项目动态设置页面title (H5编写小程序动态设置头部)
解决方案UMI中有Helmet这个插件API ,专门用来自定义页面头部写在HEAD中的都可以写在这里面:meta , link 等原创 2021-06-29 18:13:14 · 3924 阅读 · 0 评论 -
ios禁止页面橡皮筋效果(附上原生和react的解决方案)
效果在安卓上,页面是铺满且不可下拉的,但是在iPhone上整个页面可下拉,会露出空白解决原生:$(document).ready(function(){ function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListener( 'tou原创 2021-06-29 16:37:40 · 1517 阅读 · 3 评论 -
React+Antd 无插件 实现多个输入框验证码功能 + 倒计时(附完整代码)
需求如下图,实现多个框的验证码,并且在输入后自动调用接口思路在一个div中放置对应个数的span使用一个input,然后让它透明,定位在div之上span截取对应的值进行显示Code主要代码:完整代码import React, { useState, useEffect } from 'react';import { InputNumber } from 'antd';import { navigate } from '@/utils/common';//公用跳转impo原创 2021-06-29 14:23:25 · 2098 阅读 · 7 评论 -
【React hooks】获取state的旧值 || 上一轮的state或props
描述:在使用setState更新值的同时,需要通过旧值进行某些操作需求:在使用Hooks进行开始时,如何拿到旧值/上一轮的值Code:公用hook:import { useRef, useEffect } from 'react';// 记录旧值的公用hooksexport default function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value;原创 2021-05-31 13:58:29 · 5447 阅读 · 0 评论 -
Ant Design Drawer组件出现多滚动条
描述在Drawer抽屉中,内容有video,且内容高度超过可视区域时,出现多滚动条显示如下:解决方案Antd版本升级,我出现问题的版本为 4.12.3现在最新版本为 4.15.0最新版本中 已解决原创 2021-04-08 10:29:33 · 1920 阅读 · 0 评论 -
React+阿里云Aliplayer播放器实现rtmp直播(推流时间差,重启播放器,计时观看)
需求前端框架为React用阿里云播放器Aliplayer播放直播使用的rtmp协议资料阿里云播放器 Web端文档:https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1177.11de7ff0vHMWJy阿里云Aliplayer播放器在线配置页:https://player.alicdn.com/aliplayer/setting/setting.html业务流程先发请求拿到直播地址,以及设备号等原创 2021-03-26 14:25:48 · 2510 阅读 · 1 评论 -
CommonJs,AMD,CMD,UMD特点及含义
CommonJs,AMD,CMD,UMD:都是模块化使用规范CommonJs:核心思想:模块化,是为了独立作用域【同步】使用场景:在浏览器之外构建js生态系统特点:是同步加载具有缓存,被加载过后,后面都直接读取缓存结果,想重新加载模块,需要清除缓存模块可复用使用:NodeJS,小程序基本使用: require,export浏览器中使用:CMD也有在浏览器端的实现,原理是将所有模块都定义好 并通过id索引,在浏览器环境进行解析AMD:核心思想: 模块化【异步】使用场景: 在.原创 2021-03-23 15:08:29 · 197 阅读 · 0 评论 -
React Context Provider上下文使用总结(附代码)
含义及用处:上下文:用于跨层级传递值基本写法:创建上下文:const demo = React.createContext()获取 & 提供 (管道) 上下文:demo.Provider; // 注意这里没有()Context APICtx=React.createContext()Ctx.ProviderClass.contextType一般在Component 里声明为 static contextType=CtxCtx.ConsumerContext 的使用:原创 2021-02-24 18:26:58 · 2154 阅读 · 0 评论 -
React + AntD + MD5 前端上传文件到阿里OSS(JS版本)(分片上传,普通上传)
阿里oss配置文档前端直接对接 使用的是官网的这部分:https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1490.375926fdoVE8GE配置前期配置可参考文章:https://segmentfault.com/a/1190000020963346?utm_source=tag-newest描述的十分详细,一定要配置好对应的权限思路:初始化(弹窗打开时 初始化)上传文件时,先不原创 2021-01-13 13:19:40 · 2098 阅读 · 1 评论 -
Keycloak+React+Umi+Antd 设置权限 显示动态路由 及 页面按钮权限
需求:可配置一级模块,二级页面,页面button权限权限控制,颗粒度到页面的按钮权限大致如下:程序框架:登录是使用的 keyclock前端项目使用的是的 react+umi+antd思路录入所有页面及button在keyclock后台中:集成的keyclock有对应的后台管理页面 所有的一级模块,二级页面,button都要记录在后台里 页面级别储存在resource中button储存在Permissions 中登录后返回当前账号所对应的资源及权限button权限:拿到所原创 2021-01-12 17:47:40 · 2570 阅读 · 2 评论 -
AntD Form组件复杂的动态增减表单项,默认展示一个进行占位
需求:表格有可添加删除项,但是默认要至少填一组使用的组件:antd的form有对应的demo但是demo里面是默认一组都不显示,之前没时间研究,所以直接在初始值那里,默认第一组的赋值为每个参数为" "这样的问题:1.在提交的时候 默认是有值的 直接把" "提交上去了2.当动态删减的表单项比较多的时候,这样处理并不太合理解决方案:直接在这个参数里放{}占位符即可,需要默认展示几个就放几个实测好用...原创 2021-01-12 15:44:31 · 1999 阅读 · 4 评论 -
AntD自定义展开收缩的button 及 自定义展开收缩时对应的logo图片
需求如图:代码:这里用到的是Prolayout组件 logo={collapsed ? logoMini : logo} collapsed={collapsed} collapsedButtonRender={false} headerContentRender={() => { return ( <div onClick={() => setCol原创 2021-01-11 16:13:04 · 2036 阅读 · 0 评论 -
AntdPro 实时消息弹窗,仅弹一个弹窗,且为实时最新的一条
需求如下图:需求描述: 实时消息弹窗,多条消息仅弹一个弹窗,且为最新的一条思路:1.用websocket进行实时推流2.对于前端,因为消息提醒不分页面,所以写在全局,放在layout中3.将当前这条消息的相关信息储存在缓存里或者 global的model中(实时更新头部消息的条数)实现:websocket可以直接在网上查找现成以包装好的js这里只实现 仅弹一个弹窗,且为实时最新的一条功能...原创 2020-12-31 15:20:29 · 1530 阅读 · 0 评论 -
Antd Form InputNumber带后缀 required显示问题(antd高低版本)
处理如下: <FormItem required label="采购时长" > <FormItem name="purchaseDuration" noStyle rules={[{required: true}]} > <InputNumber原创 2020-12-30 16:12:23 · 2535 阅读 · 0 评论 -
Umi + AntDesign Pro 自定义路由图标(阿里矢量图标库)
需求 :菜单栏显示自定义的图标流程:1.在阿里巴巴矢量图官网 建一个自己项目!!!这里的前缀 一定一定要写icon-就是因为这里的配置,所以我之前一直都没弄出来!2.上传完自己的图片后,引用把这里的js路径 配置到basiclayout里3.使用路由的icon,就直接写你在阿里巴巴矢量图里的命名就可以显示了!此方法仅针对prolayout组件!https://prolayout.ant.design/api#api...原创 2020-12-29 09:57:59 · 6482 阅读 · 0 评论 -
CDN模式引用js包的常见问题及解决方案&&引用public文件夹静态资源问题
出现原因:项目中使用 Ant Design Charts(npm形式引用)打包时,报错:- JavaScript heap out of memory (内存溢出)网上的解决方案:在打包的地方添加内存说明:使用结果:无效CDN模式引用:Ant Design Charts官网推荐使用CDN引用方式:官网地址:https://charts.ant.design/guide/start使用结果:打包成功!!但是会出现 进入系统很慢的问题,而且是几乎百分百重现的概率因为会先去加载资源,再去原创 2020-12-28 17:48:58 · 1362 阅读 · 0 评论 -
react+umi项目打包成electron桌面应用
项目介绍web项目使用的是 React+Umi+Antd使用的是umi的脚手架创建项目 yarn create @umijs/umi-app链接:umi官网流程1.将web项目打包成静态文件后2.在打包后的文件 再用electron打包成桌面应用(所以其实是用什么框架或者脚手架,都没有什么关系,最后electron需要的是可直接在浏览器访问的静态文件=》npm run build 以后生成的index.html)Coding将项目进行打包,使用命令行 npm run build原创 2020-10-19 16:00:18 · 2749 阅读 · 4 评论 -
react+umi npm run build打包后的静态文件无法本地打开显示白屏
web 项目是使用的react框架,然后由umi的脚手架创建的yarn create @umijs/umi-app需求:打包后的文件需要本地可在浏览器打开原理原本打包后的文件 是在服务器中访问,静态文件中的方案在config中配置路径相关的属性实测好用...原创 2020-10-19 11:34:38 · 5831 阅读 · 2 评论 -
AntdPro+react 动态路由
需求:根据不同权限显示不同的菜单每个角色的菜单,是可前端页面进行配置的(可变的)思路:将所有路由的name给到后台后台根据token返回对应的name数组前端拿到数组后,遍历现有的route,留下符合条件的路由Code:拿到token后,请求对应路由,将拿到的路由,不管是几层内部结构,解构成平铺一层的数组比如:[ a:[ b:**, c:** ]]把name拿出来全部解构成一层:[a,b,c]遍历筛选:返回新的路由后 存在model里model原创 2020-09-14 16:04:56 · 2254 阅读 · 0 评论 -
AntdPro 保持菜单常开
需求如下图希望菜单可以保持打开的状态解决方案我们的defaultSetting是单独抽出来的用在BasicLayoout上加载如下原创 2020-09-14 14:35:20 · 565 阅读 · 0 评论 -
AntdV4日历控件Calendar日期选择触发机制bug
描述:切换日历控件的日期时,会触发选中日期事件V3不存在这个问题V4新有的相当于 onchange和onselect会同时触发因为业务上,选中事件会触发请求,在页面会有些显示,所以有些影响效果:解决思路:弄清触发机制使用select选择年月 会调用绑定的onChange方法本来想在这里加个字段做甄别,但是组件包装一层后,只会传一个参数过来,拿不到第二个参数代码中写了两个参数:源码中只会拿一个参数:并且如果绑定了onselect会触发onselect找到触发顺序选原创 2020-08-26 16:55:35 · 2455 阅读 · 2 评论 -
Ant Design Pro4.0+Umi3.0 升级整理
前言Ant Design Pro这次升V4,升了一个大版本搭配的Umi也升了一个大版本从V2升至V3所以这次将手上的项目整体都升级了一下升级整理:Layout整体要替换form从Form.creat()变成useForm()检验:icon不再从antd里引用Dva揉进了umi,以前从dva引用的模块,现在都从umi中引用用history替代routerequest集成在umi里想对request进行自定义处理官网有提供对应的api官网地址:https:原创 2020-08-12 16:43:25 · 2142 阅读 · 0 评论 -
【Antd4.x Form问题】[antd: Form.Item] `children` is array of render props cannot have `name`.
问题如图:代码如下:表现:默认值无法赋值上去解决方案:原理:Form.Item一定要直接包裹Input 里面如果有其他元素,就重新包裹一层官方说明:https://ant.design/components/form-cn/#components-form-demo-complex-form-control...原创 2020-06-17 14:52:29 · 24730 阅读 · 1 评论 -
antDesign v4之Pro-Table实用细节
先上ProTable 的文档官网:https://protable.ant.design/api最近在antd升到v4版本,发现了这个组件高使用率但是文档不够齐全(或许是我没仔细看) 有些隐藏技能需要看源码用熟练了 真的很好用问题目录:(文章较长 有需要的入)1.默认值2.默认PageSize3.current更新4.Protable生成查询表单…<1>配置不显示:…<2> 查询时是Select,表头不显示筛选5.Protable生成新建/更新表单…<原创 2020-05-18 15:23:07 · 12625 阅读 · 23 评论 -
antd Input和InputNumber的细节
InputNumber 提示’xxx is not string’代码如下: {getFieldDecorator('feeRate', { initialValue: (feeRate * 100).toFixed(1), rules: [ { required...原创 2020-03-24 17:56:20 · 10124 阅读 · 1 评论 -
react-router的基本使用及redux的串联使用(路由守卫)
本文仅针对reactRouter及redux的简单串联使用提示:react-router的安装命令为npm install --save react-router-dom在页面中对route的引用一般用到的route的API 就上面引用到的,具体的使用 查看文档https://reacttraining.com/react-router/web/guides/quick-start...原创 2020-01-19 16:14:16 · 534 阅读 · 0 评论 -
react自主设计表单验证(类比antDesign)
antDesign表单函数配置分析用getFieldDecorator包起来的高阶组件 进行扩展getFieldDecorator(name,options)(component)对组件进行name注册,传入opotions配置以及回调里传入底层组件component自定义表单验证思路:用装饰器来扩展底部组件在装饰器里写入对事件的处理(装饰器教程链接:https://blog...原创 2020-01-17 11:19:47 · 307 阅读 · 0 评论 -
react的复合组件
定义:等同于vue的slot插槽拆分成容器和管理内容逻辑的组件普通嵌套命名嵌套props.children是固定的 用来显示默认的可以显示按钮,但是无法用来嵌套页面函数式嵌套通过调用方法来显示页面结果子组件添加属性给所有的radio添加 name:hanbin...原创 2020-01-14 16:55:06 · 303 阅读 · 0 评论 -
react高阶组件、链式组件嵌套、装饰器
高阶组件定义:接收一个组件 返回一个新组件运用场景:扩展公用组件 可对公用组件进行扩展示例:高阶链式组件定义:组件之间的多层嵌套沿用上面一个例子const NewHanbin = withHanbin(hanbin)这只是一层嵌套 还可能多层嵌套const NewHanbin = withHanbin(withHanbin(hanbin))嵌套层数多了以后显得累赘,...原创 2020-01-14 16:40:12 · 453 阅读 · 0 评论 -
react配置插件按需加载(无脚手架情况下)
配置按需加载原理:安装react-app-rewired取代react-script在根目录下新建一个config-override.js 里面进行配置安装react-app-rewirednpm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save在根目录下新建一个config-override.j...原创 2020-01-14 16:14:49 · 319 阅读 · 0 评论