当 React

如何解决当 React

我正在使用 react 构建一个网站，我正在使用 offsetTop 属性和 clientHeight 属性来实现自定义视差效果（我将它们保存在本地状态以使用它们进行计算）。为了获得这些值，我创建了一个已插入到组件中的引用。

当屏幕尺寸发生变化时，应重新评估这些值并更新状态，否则视差效果将无法正确显示。要执行此操作，我只需使用以下方法更新状态。当屏幕调整大小时它工作得很好，但是，当方向改变时它给我带来了很多问题（我获得了错误的高度和偏移值）。

handleResizeOrOrientationChange() {
    let node = this.sectionRef.current;
    if (node) {
        this.setState({
            height: node.clientHeight,topOffset: node.offsetTop
        },() => console.log(this.state));
    }
}

[注意：“if”总是被执行的]

解决方法

经过一系列试验，我找到了一个可能的解决方案：在方向更改期间，refs 在计算大小方面表现不佳，甚至在“componentDidUpdate()”中推迟渲染也不起作用，因为它触发得太早而无法生效。但是，由于滚动期间需要有效渲染的大小，因此我改变了我的方法，每次滚动页面时都检查组件的高度。通过这种方式，每次在我滚动页面的准确时刻检测到调整大小和/或方向变化。

这将很好地处理调整大小。但是，随着方向的变化，在用户滚动页面之前，UI 可能看起来很糟糕。为了解决这个问题，每次发生方向变化时，我都会强制页面滚动到顶部。

即使这种方法有效，它仍然是一种解决方法。