Question

我的页面上有一个内容区域，用于显示要从API提取的数据。我将其连接起来，以便一旦从API中提取数据，就将其保存到Redux存储中并在页面上显示它。现在，我需要在顶部和底部按钮上添加一个滚动条，这样，如果页面的长度超过给定的数量（例如600px），它们就会出现。奇怪的是，在页面首次加载时，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

Answer 1

从生命周期中调度动作是完全可以的。只需确保添加防护措施即可避免无限循环。也就是说，仅在需要更新数据时才从componentDidUpdate调度操作。

Answer 2

感谢@pgsandstrom对这个主题的帮助。

对于任何试图为内容区域实现滚动条的人，我实际上已经设置了Redux以使用componentDidUpdate进行工作，但是随后发现了更好的方法。如果我们可以检查车身高度和车窗内部高度并进行比较然后基于此做出决定，该怎么办？所以下面的代码正是这样做的。如果滚动条在页面上可见，则本质上返回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";
      }
  }

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

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

2 个答案: