问题描述

  • antd version: 2.7.4
  • OS and its version: windows7
  • Browser and its version: Chromium 55.0.2883.87

antd--react组件库,引入后进行npm run dev编译的出现找不到对应的样式

  • 堆栈信息详情
ERROR in ./~/antd/lib/input/style/index.less
Module parse failed: E:\PersoanlProjects\bookreader\node_modules\antd\lib\input\style\index.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

解决方案

  • 配置css loaders去掉exclude属性,不要包含node_modules/antd;

反馈

  • 编译正常

参考资料

查找了官方Issuse--Webpack css loading


问题描述

  • react version: 15.3.2
  • OS and its version: windows7
  • Browser and its version: Chromium 55.0.2883.87

解决方案

  • 查找这个组件发现是window.addEventListener('scroll', this.handleScroll.bind(this));与 window.removeEventListener('scroll', this.handleScroll.bind(this));出现问题。
 handleScroll(e) {
//console.log(e);
let scrollEle = e.target.scrollingElement;
const clientHeight = scrollEle.clientHeight;
let t = scrollEle.scrollTop;
let c = this.refs.content;
let top = t <= 40 ? 40 - t : 0;
//let bottom = t >= c.height + c.offsetTop - clientHeight ? 40 : 0;
//console.log(t + "--" + c.height + "--" + c.offsetTop + "--" + clientHeight);
this.setState({
leftToolBarTop: top,
//rightToolbarBottom: bottom
});
}
  • 分析因为 this.handleScroll.bind(this)产生了新函数,所以清除的时候是另一个“指针”,因此把绑定放到构造函数中。
constructor(props) {
super(props);
this.state = {};
this.scrollTop = 0;
this.handleScroll = this.handleScroll.bind(this)
}
componentWillMount() {
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}

反馈

  • 正常

参考资料

React怎么绑定scroll事件?


React问题集序的更多相关文章

  1. react新手入门(序)

    之前在软件园使用的是react,当时为了做个集光推送,自己去搭过react,这次项目中继续使用react,于是又重新操作了遍,恰巧公司买了本react的书籍,这本书写的非常好,看着并不觉得拗口,很容易 ...

  2. [转] Immutable 详解及 React 中实践

    https://zhuanlan.zhihu.com/p/20295971 作者:camsong链接:https://zhuanlan.zhihu.com/p/20295971来源:知乎著作权归作者所 ...

  3. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  4. Immuable详解以及在React中的实战

    转载自:https://zhuanlan.zhihu.com/p/20295971, 今天看到这篇文章后情不自禁的转载过来了,我的天老爷,我看到后直接菊花一紧,这写的太好了,直接写进我心坎里了,我必须 ...

  5. Immutable 详解

    Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来 ...

  6. Immutable的认识

    Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper).它内部实现了一套完整的 ...

  7. Immutable 学习

    1.什么是Immutable Data? Immutable Data 就是一旦创建,就不能再被更改的数据.对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对 ...

  8. Kotlin入门(17)等式判断的情况

    话说等式可是编程语言最基本的表达式之一,不管哪种高级语言,无一例外都采用双等号“==”判断两个变量是否相等:就算是复杂的对象,在Java中也可通过equals函数判断两个实例是否相等.按理说这些能够满 ...

  9. [No0000156]天干地支-狗年我懂,戊戌二字怎么来的?

    话说,这几年的年份,总能让人联想到历史课本.比如,2014年是甲午马年,是中日甲午战争120周年.而2018年是戊戌狗年,嗯,戊戌变法也过去120年了…… 狗年相信大家都了解,小观前面两期关于反犬旁和 ...

随机推荐

  1. JAVA提高二十:CopyOnWriteArrayList&CopyOnWriteArraySet&ConcurrentHashMap介绍

    前面我们将java集合类的大部分类都进行了深入分析,但我们会发现一个共性问题就是并发的问题,那么如何解决呢?我们前面基本都是通过Collections的一个工具类来进行的解决,但实际大部分使用中人们普 ...

  2. 关于postgres中的一些宏的tips

    Postgresql作为C语言开发的代码,其中大量的运用了一些宏的操作. 因此理解这些宏很重要,然而有时候这些宏总让人很费解. 作为一个经常翻翻postgresql源码的小白,在这里做一个记录吧,方便 ...

  3. 《精通c#(第6版)》【PDF】下载

    图灵程序设计丛书:精通C#(第6版)是C#领域久负盛名的经典著作,深入全面地讲解了C#编程语言和.NET平台的核心内容,并结合大量示例剖析相关概念.全书分为八部分:C#和.NET平台.C#核心编程结构 ...

  4. kvm 随笔

    1. 查看kvm虚拟机状态 # virsh list --all   2. KVM虚拟机开机 # virsh start windows   3. KVM虚拟机关机或断电 (1) 关机 virsh关机 ...

  5. Xftp连接阿里云Linux,向Linux上传文件,Windows和Linux文件传输

    我之前是用SecureCRT连接阿里云Linux的,上传文件用的Alt+p快捷键,感觉不是很方便.后来朋友给我推荐了Xshell,感觉确实好用得很多. 传输文件用的是Xftp,今天在向我的个人网站发布 ...

  6. IntelliJ IDEA如何设置头注释,自定义author和date

    下面这张图,保证你一看就会: 下面这个模板,你拿去改一改就行了. /** * @Author: Gosin * @Date: ${DATE} ${TIME} */ 如果觉得上面名字下面的波浪线碍眼,可 ...

  7. 我是这样学习使用google学术的

    本科期间一直在cnki上面检索论文,随着科研能力的需要,部分论文在cnki的局限性就体现出来了,我就开始培养自己的文献检索能力.现在的各种开发工具,各种论文检索网站再加上文献检索的形式越来越复杂,我们 ...

  8. Angularjs 2 绝对零基础的教程(1):从安装配置开始

    写在前面 适合人群: 1. 愿意未来从事前端工作,并以此开拓自己未来职业 2. 有任何一种编程语言基础 3. 喜欢简单粗暴学一门实用的技术,而不是做科研. Angular 2 比 Angular 1 ...

  9. 2.移植uboot-添加2440单板,并实现NOR、NAND启动

    上章分析了uboot启动流程后,接下来便来配置新的单板,实现nor.nand启动 1.首先在uboot里新建单板2440 : cd board/samsung/ cp smdk2410 smdk244 ...

  10. tar: This does not look like a tar archive tar: Skipping to next header tar: Exiting with failure status due to previous errors

    解压一个.tar.zip文件时报错 tar -zxvf bcl2fastq2-v2---linux-x86-.zip tar: This does not look like a tar archiv ...