依赖内层DOMsize设定外层DOM的size

遇到的问题

在应用scrollPane组件包裹tree组件的时候，由于flex布局，内层组件超出部分不会自动超出外层父组件，这时候需要手动去设置内层组件的size。

一开始，想当然在tree组件componentDidMount中根据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，再根据获取的数据进行后续操作。

关键代码如下：

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...
}

个人经验，欢迎指正。