遇到的问题
在应用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...
}
个人经验，欢迎指正。
