如何在每次页面更新时获取元素的高度答案

【问题标题】：How to get height of an element at each page update如何在每次页面更新时获取元素的高度
【发布时间】：2025-12-06 15:20:03
【问题描述】：

我的页面上有一个内容区域，显示从 API 中提取的数据。我把它连接起来，所以一旦从 API 中提取数据，它就会保存到 Redux 存储并在页面上显示它。现在，我需要在顶部和底部按钮上添加一个滚动条，这样如果页面长度超过给定数量，比如 600 像素，它们就会出现。奇怪的是，在第一次加载页面时，API 查询没有启动，因此页面是空的，所以按钮不应该出现。

鉴于这一切，我没有办法，只能在 componentDidUpdate() 中执行此操作

componentDidUpdate() {
    let ContentArea = document.getElementById('contentArea');        
    if(ContentArea != null & ContentArea.clientHeight > 0){
        this.props.pageContentHeight(ContentArea.clientHeight)
    }
}

并将高度值保存到 Redux 存储，以便在代码中我可以像这样显示滚动条：

{(contentHeight > 600) && <Scroll to="bottom" /> }
<Router page={pageURL} />
{(contentHeight > 600) && <Scroll to="top" /> }

上面的 contentHeight 来自 redux 商店。

根据我的阅读，不建议在 React 更新生命周期内进行调度，尤其是因为调度也会导致更新生命周期启动，这可能会导致无限循环。有什么方法可以让你们想到在页面上添加滚动到顶部或底部按钮？

有这个包允许滚动底部而不是顶部： https://www.npmjs.com/package/react-scroll-to-bottom

【问题讨论】：

标签： reactjs react-redux react-lifecycle

【解决方案1】：

从生命周期中调度动作是完全可以的。只要确保添加警卫以避免无限循环。也就是说，只有在需要更新数据时才从componentDidUpdate 分派一个操作。

【讨论】：

好的，那么您将如何解决这个问题？
你可以访问redux的值，你可以访问当前元素的高度。比较两者。如果它们不同，则触发该操作。

【解决方案2】：

感谢@pgsandstrom 在该主题上提供的帮助。

对于任何尝试为内容区域实现滚动条的人，我实际上已经将 Redux 设置为使用 componentDidUpdate 工作，但后来发现了更好的方法。如果我们可以检查车身高度和窗户内部高度并进行比较然后根据它来决定呢？所以下面的代码正是这样做的。如果滚动条在页面上可见，则本质上返回 true，如果不可见，则返回 false，然后您可以根据此决定显示 Scrollbar。

document.body.scrollHeight > document.body.clientHeight

我在下面做了：

componentDidUpdate() {
      if(document.body.clientHeight > window.innerHeight) {
          document.getElementById("topPage").style.display = "block";
          document.getElementById("bottomPage").style.display = "block";
      } else {
          document.getElementById("topPage").style.display = "none";
          document.getElementById("bottomPage").style.display = "none";
      }
  }

确保将其放置在可以识别更新的组件中。

【讨论】：