遇到的問題

在應用scrollPane組件包裹tree組件的時候，由于flex布局，內(nèi)層組件超出部分不會自動超出外層父組件，這時候需要手動去設置內(nèi)層組件的size。

一開始，想當然在tree組件componentDidMount中根據(jù)tree的scrollWidth，scrollHeight來init tree size。然后在在 componentWillReceiveProps中再次獲取 this.refs.tree的scroll size重新設置tree size。或者在componentDidUpdate中獲取 this.refs.tree的scroll size重新設置tree size。

bug原因

但是，由于在componentDidMount中init了 tree size，在componentWillReceiveProps和componentDidUpdate中獲取this.refs.tree 的scroll size還是第一次設置的大小。這時候我們就會獲取不到正確的 scroll size。

解決方法：

在componentWillReceiveProps中取消init的tree size 然后在獲取其size，再根據(jù)獲取的數(shù)據(jù)進行后續(xù)操作。

關鍵代碼如下：

Class Tree extends React.Component {
  constructor(props) {
    //...code...
    this.state = {
      //...code...
      treeWidth: null
      //...code...
    }
    //...code...
  }

  componentDidMount() {
    //...code...
    this._treeWidth = this.refs.tree.scrollWidth;
    this.setState({
        treeWidth: this._treeWidth
    })
    //...code...
  }

  componentWillReceiveProps() {
    //...code...
    this.setState({
        treeWidth: null
    }, () => {
      if(this.refs.tree.scrollWidth !== this._treeWidth) {
        this._treeWidth = this.refs.tree.scrollWidth;
      }

      this.setState({
        treeWidth: this._treeWidth
      })
    })
    //...code...
  }

  render() {
   //...code...
   return (
      <div ref='tree' style={this.state.treeWidth ? {width: `${this.state.treeWidth}px`}} /*...*/>
         //...
      </div>
   )
  }

  //...code...
}

個人經(jīng)驗，歡迎指正。