React问题集序

时间:2022-04-22
本文章向大家介绍React问题集序,主要内容包括问题描述、解决方案、反馈、参考资料、问题描述、解决方案、反馈、参考资料、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

问题描述

  • 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:PersoanlProjectsbookreadernode_modulesantdlibinputstyleindex.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));与
 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事件?