
React
文章平均质量分 60
React实战
辰九九
一以贯之的努力,不得懈怠的人生。
展开
-
React 父组件调用子组件方法
React使用props实现父组件调用子组件方法原创 2022-07-09 10:46:26 · 1713 阅读 · 0 评论 -
Umi3.5配置全局路由及菜单
目录需求分析功能实现1.构建全局layout页面并实现路由跳转2.全局layout根据路由配置生成具体菜单需求分析本文与上一篇文章利用umi.js 3.5+Dva.js 搭建React框架无缝连接,上文我们实现了React开发环境的基本搭建。但是根据我们的使用经验,还有一个功能缺席:全局菜单显示,点击跳转到不同的页面实现效果如下所示:功能实现1.构建全局layout页面并实现路由跳转UmiJs 约定式路由src/文件夹下新建layouts文件夹原创 2022-03-17 18:20:27 · 5320 阅读 · 0 评论 -
电信杯网球比赛系统_项目总结
项目介绍电信杯网球比赛系统小程序采用比赛邀请制,实现了赛事创建,发起比赛邀请制,比分填写,规则定制,运动员基础水平管理等系列功能,适用于网球比赛;用户 通过工号注册登录,后台根据 openId 是否和工号一对一绑定判断是否是用户 本人。系统包括微信小程序(Taro.js+Dva.js)和后台管理平台(React.js+A ntdPro)。能适配安卓,iPhone,iPad等不同机型。 负责内容微信小程序1.比赛邀请制后台管理平台1.比赛管理、用户管理和规则管理原创 2022-03-13 12:39:55 · 1451 阅读 · 0 评论 -
安州市市场监督一体化平台_项目总结
项目介绍安州市事通是并配套相应的后台管理系统。这是笔者第一次采用原生进行微信小程序的开发,遇到一些不能理解的问题,只有去认真地看官方文档,同时也培养了自己阅读文档的习惯,以下列举了自己开发中遇见的问题和解决方法负责内容小程序后台所遇问题项目总结和个人收获...原创 2022-03-11 20:22:58 · 509 阅读 · 0 评论 -
利用umi.js 3.5+Dva.js 搭建React框架
搭建umi基本框架umi.js脚手架基本搭建搭建完成后得到下图所示目录结构:使用命令启动项目yarn start因为项目默认使用ts和React Hooks没有引入 Dva.js引入dva.js找到项目目录下的 .umirc.ts 文件,加入如下配置项 dva: { immer: true, // 表示是否启用 immer 以方便修改 reducer hmr: false, // 表示是否启用 dva model 的热更新 },在src下新建models文原创 2022-03-08 20:31:49 · 1624 阅读 · 0 评论 -
TypeError:Cannot read properties of undefined(reading XXX)
问题描述我们在GetNav方法中使用map遍历数组为每一个元素动态生成一列数据,并为每一列数据加上onClick事件,运行报错updateRoute为undefined问题分析map里面的function声明,这种声明方式因为是独立执行,在严格模式下this指向undefined经过验证,打印出来的this确实为undefined因此修改map里面的name方法为箭头函数即可解决问题return arr.map((item)=>{……})问题总结本文归根结底为this指原创 2021-11-19 13:51:19 · 45257 阅读 · 0 评论 -
使用Promise解决请求先后次序问题
问题分析需求:点击事件实现快速新增一篇文章最开始的方案根据文章uid去model中存的list找数据,再发送一个新增请求即可实现。但是list中没有存文章的content,此时就不得不发送两次请求,先获取文章详情,拿到详情内容再作为参数发送新增请求。问题:详情请求数据成功之后,再请求新增接口。也就是说第二次的请求需要使用第一次请求得到的数据。问题解决思路:使用promise实现异步操作。问题总结参考文档...原创 2021-11-16 18:13:43 · 2792 阅读 · 0 评论 -
React 16.X 实现不同API对应同一路由
Situation一个后台项目,现在有三个模块,除了模块名字和个别需求不一样之外,其他几乎一模一样,我们想要把他们合并一下,这样就不用写三个路由建三个文件夹了Task配置三个URL区分模块,同时为三个模块配置同一个路由。因为每一个模块对应的接口都是不同的,那么问题来了,我们如何区分当前页面是哪一个模块呢?Action1.最开始的解法是在index的ComponentDidMount中根据URL判断当前页面的moduleType并将其存在state中;这样就存在一个致命的问题,后面原创 2021-11-15 21:51:03 · 983 阅读 · 1 评论 -
JS策略模式_优化代码实例
策略模式策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体 的算法,并负责具体的计算过程。第二个部分是环境类Context,Context 接受客户的请求,随后 把请求委托给某一个策略类。要做到这点,说明Context中要维持对某个策略对象的引用。JS设计模式 之 策略模式原创 2021-11-05 09:43:26 · 313 阅读 · 0 评论 -
解决Taro微信小程序Canvas层级太高覆盖Modal组件问题
问题描述使用Taro-ui的AtAccordion(手风琴)组件放在modal中。但是真机调试的时候,下面图层的圆环会覆盖在AtAccordion的上面。如下图所示:问题分析canvas层级太高导致模态框被覆盖掉z-index和蒙层的问题。因为canvas组件是由客户端创建的原生组件,原生组件层级是最高的,所以页面中的其他组件无论设置 z-index为多少都无法盖在原生组件上。想试着用cover-view组件,能覆盖canvas,map,video,camera等原生组件。但是也有一定的原创 2021-10-21 09:07:04 · 1891 阅读 · 1 评论 -
React Hook如何保证每次渲染state不会丢失,Dva Model在state中存储数据的底层原理
问题描述1、 我们知道JavaScript中想要实现类似于Java静态变量的话,可以用闭包和localStorage实现。闭包:有权访问另一个函数作用域变量的函数叫做闭包。满足三个条件 1. 定义了局部变量 2. 函数返回一个匿名函数 3. 返回的匿名函数中需要使用第一步定义的局部变量局部变量被另一个函数使用,即变量被引用,所以就不会被回收了,因此可以利用这一个特性来封装一个私有变量。本地存储是一个window的属性,包括localStorage和sessionStorage,前者一直原创 2021-09-05 14:24:56 · 2345 阅读 · 0 评论 -
启动React项目 Module not found: Can‘t resolve ‘web-vitals‘ in ‘C:\Laboratory_train\my-app\src‘
问题描述npx create-react-app my-app使用以上命令出错:npm start / yarn start使用以上命令启动出错问题解决全局找到reportWebVitals.js文件,在index.js中注释掉这两句即可运行。因为笔者以前在一个项目里面使用过offline cache,按照以下方法试过没有用,还是贴出来供大家参考。yarn 完整性检测失败...原创 2021-09-04 14:48:35 · 5168 阅读 · 4 评论 -
antd4获取表单所有数据(表单里既有时间又有字符串)
需求分析需要使用一个表单获取到用户输入的数据作为通过URL请求数据的参数,然后重新将获取到的数据渲染到页面。问题分析可是总是无法获得时间和其他参数一同的对象,因为antd的时间是moment格式,只是需要转换一下。但是一开始弄了很久,一度陷入坑里面无法自拔:使用antd3的getFieldDecorator。兜兜转转,antd的版本换了又换,问题没有解决,其他正确代码因为不兼容还报了一大堆错误。导师已经封装好了一个组件standardTable。使用moment进行时间格式转换。最后一种方原创 2021-07-04 08:03:34 · 758 阅读 · 0 评论 -
[]Uncaught Error: Objects are not valid as a React child (found: object with keys {data}).
问题分析用React的Hooks渲染数据,得到数据想传值给子组件以Descriptions的样式渲染出来,但是报错如下[]Uncaught Error: Objects are not valid as a React child (found:object with keys {data}). If you meant to render a collection ofchildren, use an array instead.问题解决经过检查发现将子组件接收到的参数改为以下内容即可f原创 2021-06-18 16:44:48 · 701 阅读 · 0 评论 -
通过 storage 获得的数据无法渲染进input框
最近在写一个广告投放平台后台管理的界面,大概就是:点击编辑按钮,能够跳出广告编辑弹窗,并且里面的内容是已经填好了的,需要我们修改。我是利用localStorage来获得的数据,然后转为字符串格式再转换为JSON格式,可是当用 document.getElementById("ad_title").innerHTML= data.title;来写的时候,就是没办法渲染出来,后来请教师姐才明白:input是单标签,所以用innerHTML无法渲染,必须要用value才可以改变,最后修改如下。valu原创 2021-04-25 21:36:11 · 234 阅读 · 0 评论 -
菜鸟花了一个月,做出一个过得去的ToDoList
记录一下这个特殊的日子,2020年下半年开始接触React。这学期开学,老师让我做出点东西给他看,因为只一味地看书是完全不会有进步的,没有自己敲代码出点错误是不会得到进步的。(优秀的程序猿都是在不断debug中得到成长的,所谓代码一年debug10年就是这样的吧)。在和老师的一次次交流下,程序一步步变得规范,代码量一步步减少,各种各样的bug也出了,不过最后在秃头日常中,还是对付了过来。也确实有了很大的收获提升了对React的兴趣,将这段经历分享给是小白的你,咱们共同进步,大佬请自动忽略一个菜鸟的自原创 2021-04-15 14:59:33 · 276 阅读 · 0 评论 -
TypeError: Cannot read property ‘map‘ of undefined-解构赋值的问题
现状:用React写一个很简单的todolist,可是遇到这个问题,奈何我东改西改,这个错误就是雷打不动……后来,突然灵光一下,想起了一个场景,那时我去请教老师老师:你这个一大串一大串的后面跟起,你不觉得看起来很恼火吗?以后的大项目,这个问题会更严重,所以把它改成解构赋值就会好很多。原版:this.state.list.handleAdd()我:const {List}=this.state老师:一阵无语之后,解构赋值不是这样的,你还没有掌握到解构赋值的精髓老师:const {list}=thi原创 2021-04-10 15:23:32 · 1758 阅读 · 1 评论 -
TypeError: Cannot read property ‘setState‘ of undefined
今天用React做一个小demo时出现了个这样的问题(请自动忽略文中配色,我知道不好看) // 输入内容 handleInputChange(event) { this.setState({ inputContent: event.target.value }) }效果图也会出来,但是当点击输入框时,就会报错原因就是:到了方法handleInputChange 里面的this 就不是组件的this了,我们有两种解决方法:原创 2021-03-26 13:08:22 · 249 阅读 · 0 评论