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项目中遇到的坑的更多相关文章

  1. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  2. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  3. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  4. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  5. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

  6. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  7. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  8. 深入浅出TypeScript(5)- 在React项目中使用TypeScript

    前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...

  9. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

随机推荐

  1. Netty之心跳检测技术(四)

    Netty之心跳检测技术(四) 一.简介 "心跳"听起来感觉很牛X的样子,其实只是一种检测端到端连接状态的技术.举个简单的"栗子",现有A.B两端已经互相连接, ...

  2. Nginx集群之WCF分布式消息队列

    目录 1       大概思路... 1 2       Nginx集群之WCF分布式消息队列... 1 3       MSMQ消息队列... 2 4       编写WCF服务.客户端程序... ...

  3. PHP curl请求https遇到的坑

    PHP里curl对https的证书配置默认是服务器端要求验证的,如果服务器端没有配置证书验证,则无法请求https路径.如果为了简便使用不需要配置https证书的话,配置curl时将以下两项设置为fa ...

  4. JS实现EasyUI ,Datagrid,合并单元格功能

    为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...

  5. Mac OSX下Sublime Text配置使用Ctags实现代码跳转

    1. 先用brew工具安装ctags,安装路径在/user/local/bin The default ctags executable in OSX does not support recursi ...

  6. JAVA面向对象的三大特性 封装

    将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 优点: 1只能通过规定的方法访问数据. 2隐藏类的实例细节,方便修改和实现. public c ...

  7. 【ASP.NET MVC系列】浅谈表单和HTML辅助方法

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  8. 图的简单应用(C/C++实现)

    存档: #include <stdio.h> #include <stdlib.h> #define maxv 10//定义最大顶点数 typedef char elem;// ...

  9. Gym101522A Gym101522C Gym101522D

    Gym101522A A There are two popular formats for representing a date: day/month/year or month/day/year ...

  10. MIT公开课:算法导论 笔记(一)

    课程链接:http://open.163.com/special/opencourse/algorithms.html 第一课:算法分析基础 1.介绍插入排序与归并排序,计算并比较最坏运行时间 2.算 ...