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

Question

我的页面上有一个内容区域，显示从 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 store。

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

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

Answer 1

从生命周期调度动作是完全没问题的。只需确保添加守卫以避免无限循环。也就是说，如果需要更新数据，则仅从 componentDidUpdate 调度一个动作。

Answer 2

感谢@pgsandstrom 对该主题的帮助。

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

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";
      }
  }

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

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

How to get height of an element at each page update

reactjs

react-redux

react-lifecycle