Javascript reactjsforcedom更新

我试图通过react让css动画达到元素的高度

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

要设置折叠（高度从x到0）的动画，我将元素的高度设置为静态高度（使用scrollHeight），然后立即将高度设置为0，反之亦然（高度从0到x）

不幸的是，这只是偶尔起作用。我认为react是检测到这两个事件在同一道具上快速发生，并且只将最新的事件传播到DOM，这会破坏我的动画

有没有办法强制react将这两个更改传播到DOM？

代码（可能不太有趣）：

---

this.forceUpdate（）

将直接刷新对DOM的更改。安装程序无法按预期工作的原因是

setState（）

内部的

componentWillReceiveProps

不会触发重新渲染，如下所示

this.forceUpdate（）

正如@limelights所提到的那样..我尝试使用

this.forceUpdate（）

但是运气不好。它似乎仍然会跳过向DOM渲染第一个高度。我认为React会从渲染带外传播到DOM，并且只渲染对DOM的最新更改。（例如，如果您对vDOM连续进行了两次更改，它可能只对实际DOM执行一次更新）

this.forceUpdate（）

将直接刷新对DOM的更改。安装程序无法按预期工作的原因是

setState（）

inside

componentWillReceiveProps

不会触发重新渲染，如下所示

this.forceUpdate（）

正如@limelights所提到的那样..我尝试使用

this.forceUpdate（）

但是运气不好。它似乎仍然会跳过向DOM渲染第一个高度。我认为React会从渲染带外传播到DOM，并且只渲染对DOM的最新更改。（例如，如果您对vDOM进行了两次快速连续更改，那么它可能只对实际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);
    }
}