0

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

4

2 回答 2

1

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

于 2019-04-24T15:27:11.517 回答
0

感谢@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";
      }
  }

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

于 2019-04-25T14:02:53.883 回答