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,这样就能简单的解决样式冲突问题
react项目中遇到的坑的更多相关文章
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
随机推荐
- PXE+kickstart网络安装CentOS7.4系统及过程中各种报错
环境:关闭防火墙.selinux 注意:虚拟机进行网络安装的话,7.3以后的系统是需要2G以上的内存 [root@kickstart ~]# cat /etc/redhat-release CentO ...
- canvas 简易的加载进度条
做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种. canvas + svg高低配,应该还不错的.顺便一提,canvas用来压缩图片也是么么哒的. 先看下效果图 ...
- 消费五分钟,小白也能了解的经典技术:关于IP负载均衡(LVS之NAT)
这里准备以两篇文章来大概讲述一下LVS负载均衡 NAT TUN/DR和共享存储 前言: 为什么搭建LVS: 若一台服务器只能支持10人在线.那么有100人访问,则需要多少台服务器. 这个不言而喻:10 ...
- CentOS7下安装Docker-Compose
Docker-Compose是一个部署多个容器的简单但是非常必要的工具. 安装Docker-Compose之前,请先安装 python-pip 安装 python-pip 1.首先检查linux有没有 ...
- 管理 MariaDB 用户账户
哪些用户可以连接到MariaDB 服务器,他们都可以从哪些地方连接,连接到服务器后又能够做什么等,都是本文将涉及到的内容. 用户的权限信息都保存在 mysql 库中的几个权限表中.对 MariaDB ...
- slave延迟很大优化方法
一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以InnoDB引擎为主)完成事务提交的,而在slave上,复制 ...
- 批量将webp格式的图片转成png的图片 https://cn.office-converter.com/WEBP-to-PNG
https://cn.office-converter.com/WEBP-to-PNG
- React Native随笔——组件TextInput
一.实例 先看一下我要做的搜索框的样子 需要一个Image,和一个TextInput 去掉默认下划线 underlineColorAndroid='transparent' 设置光标颜色 select ...
- JSP执行过程分析
概述 在java领域,表现层技术主要有三种:jsp.freemarker.velocity.jsp是由sun公司倡导的官方标准,freemarker和velocity是第三方的模板. jsp是大家最熟 ...
- html笔记2
html css的用法 <style type="text/css">代表我要使用css了 <html> <head> <style ty ...