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:\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事件？