react
文章平均质量分 83
YICONGITSME
邮箱 1129412379@qq.com
展开
-
React离开路由时确认弹窗
一、离开路由弹出弹窗最近做一个h5的需求,要求在用户页面返回时如果操作了就弹出一个弹窗,来提示用户是否保存此页面所操作的内容。之前做过vue的路由守卫,但是react的还是第一次做,就记录一下。首先需要引入withRouter,来包裹一下需要弹窗的页面,此时在componentDidMount中才能获取到 this.props.route,因为我们的项目需要弹窗的页面是又通过HOC高阶组件进行了一次嵌套的,所以用withRouter来包装弹窗页面,而componentDidMount中的内容原创 2021-01-11 15:13:05 · 2106 阅读 · 2 评论 -
React中渲染DOM 三元表达式中多个三元表达式判断
我想在判断等于4后再进行进一步判断,然后渲染三个dom结构,但发现只能写一个,写多了就会报错。于是尝试解决,发现这样虽然不报错了,然是有警告,下面两行的dom结构是渲染不出来的后来想到了使用数组,用逗号分割 就可以了。{ recordField.fieldType == 4 ?([ recordField.startLableName ? <span>{'"'+recordField.startLableName+'"'}</span> :原创 2020-08-14 14:52:40 · 3157 阅读 · 0 评论 -
react redux在项目中的使用
一开始我接触到redux是很懵的,看官方文档也很枯燥乏味,不理解说的什么意思,也是看过就忘,所以就结合shine项目来熟悉一下redux。也可能有写的不对的地方,欢迎指出。一、构建reducer首先看storeConfig下的reducers.js。combineReducers函数的作用是把一个或多个的reducer结合成一个reducer,作为createStore函数的第一个参数。使用方法是: combineReducers({ key1 : reducer1, k...原创 2020-06-01 10:32:16 · 1049 阅读 · 0 评论 -
React移动端H5页面出现弹窗蒙层屏幕不可滑动
最近在做一个需求,用户第一次进入网页会有一个新手引导的功能,是一个半透明的蒙层,蒙层之后的主页面会有很多的模块功能,在功能很多的情况下,屏幕就可以向下滑动,UI觉得在有蒙层的情况下最好不要让屏幕可以滑动,因为新手引导这个图片是根据一个模块来定位的,如果滑动的话,新手引导也会跟着滑动,肯定是不合理的。首先在加载新手引导的位置,加载完之后,执行监听事件,注意监听的元素一定要是不可滑动的元素,就是蒙层。(一开始我把事件监听在body元素上了,导致都不能滑动了,太笨了。) // 获取请假新手引导原创 2020-05-12 15:29:22 · 2157 阅读 · 0 评论 -
谷歌浏览器调试移动端h5页面
1.安卓手机打开开发者模式连接上电脑2.在谷歌浏览器中访问地址:chrome://inspect/#devices3.在安卓手机中的chrome浏览器中访问页面,记住一定要是chrome浏览器 (我只试了安卓,苹果不清楚)4.刷新,显示连接上的设备以及打开的网页,点击inspect就可以查看手机网页上的dom元素,在电脑上调试h5页面。如果打开是空白页面,需要翻墙...原创 2020-05-11 13:23:43 · 6133 阅读 · 1 评论 -
getBoundingClientRect函数获取视图位置的坑
最近在做一个功能,把新手引导的提示定位在申请的上方,申请的位置是会根据前面功能的不展示而向前移动的,所以位置是不固定的,因此新手引导的位置要根据申请元素的位置来定位。我使用了getBoundingClientRect函数来获取申请dom元素距离视图的距离。 getTypeHighLightDom(item) { const dom = document.querySelector(item.selector); let domLocal; ...原创 2020-05-11 13:22:23 · 6250 阅读 · 1 评论