Reactjs强制DOM更新

Question

我试图让css动画通过反应来获取元素的高度。

高度的CSS动画很难，因为它们需要静态高度。

为折叠设置动画（从x到0的高度）我将元素的高度设置为静态高度（使用scrollHeight），然后将高度设置为0，反之亦然，以便展开（高度从0到x ）。

不幸的是，这只会有效。我认为反应是检测到这两个事件在同一道具上快速发生，并且只传播最新的DOM，这会破坏我的动画。

有没有办法强制做出反应，将两个更改传播到DOM？

代码（问题不是非常有趣）：

componentWillReceiveProps(nextProps){
    if(nextProps.open !== this.props.open){
        if(nextProps.open){
            this.setState({height:0, animating: true});
        }
        else{
            this.setState({height:this.refs.body.scrollHeight, animating: true});
        }
    }
}
componentDidUpdate(prevProps, prevState){
    if(prevProps.open !== this.props.open){
        if(prevProps.open && !this.props.open){
            this.setState({height: '0'});
        }
        else{
            this.setState({height: this.refs.body.scrollHeight});
        }
        setTimeout(()=>{
            this.setState({animating:false});
        }.bind(this), this.props.animationTime);
    }
}