react项目中遇到的坑

1，touchStart和touchEnd

如果touchstart和touchend改变的是同一个state，那么在首次加载渲染的时候组件会陷入死循环，原因是touchstart会直接触发，但此时state也在初始化，导致state不停的变化。

解决方法：onTouchStart={() => {this.touchstart(index)}}，给touchstart传一个匿名函数就可以了

问题升级：如果用map方法循环return一个组件，第一次加载的时候组件上绑定的所有的方法都会执行一遍，包括onClick这些，那么解决方法同上，绑一个匿名函数就可以了

2，样式冲突问题

虽然我们引入了css-modules，但是我们却发现这样一个现象：首次打开A页面，引入了A的css文件，这时候再打开B界面，又引入了B的css文件，而A的css文件还在，再打开C界面，又引入了C的css文件，而此时已经有了A，B，C三个css文件了。。。。我们期望的效果是打开A，只有A的css，打开B，只有B的css。。。，然而我查了很多资料，却发现没有办法这样，我又看了一下vue的实现，vue也是这样，不能实现我们期望的样式组件分离。

解决方法：在每个组件的最外面div设一个classname，然后在对应的css文件最外层就包一个这个classname，这样就能简单的解决样式冲突问题

转载于:https://www.cnblogs.com/yanchenyu/p/7865074.html

react项目中遇到的坑相关推荐

create-react-app 搭建react项目中的小坑
刚买的电脑安装了 16.3的 node版本然后就装了一个 create-react-app 脚手架然后就出了个问题就是搭建react项目的时候一直报错一直报错就很奇怪后来我换了个 ...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头,实现远程播放.控制移动.放大缩小等功能,首先百度搜类似的需求,搜不到,只能自己采坑,登萤石云官网,看对应文档. 一.登录萤石 ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
[react] 在React项目中你用过哪些动画的包？
[react] 在React项目中你用过哪些动画的包? react-transition-group 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...

react项目中遇到的坑

react项目中遇到的坑相关推荐

最新文章

热门文章