react-infinite-scroll 在 Material UI Drawer 中不起作用

Question

我目前正在使用 react-infinite-scroll-component 对某个帖子中的 cmets 进行分页。评论部分有一个按钮，它显示了一个应该显示分页 cmets 的抽屉。问题是，react-infinite-scroll-component 不起作用，因为它不会触发 “下一个”功能。

代码如下：

    <div>
      <Drawer
        anchor={"bottom"}
        open={open}
        onClose={handleDrawer}
        style={{ height: "100vh", overflow: "auto", margin: "0px 4px" }}
      >
        <Toolbar>
          <Typography variant="h4" style={{ flexGrow: 1 }}>
            Comments
          </Typography>

          <IconButton onClick={handleDrawer}>
            <CloseIcon />
          </IconButton>
        </Toolbar>
        <Divider />
        <br />
        <CommentForm
          comment={comment}
          handleChange={handleChange}
          handleSubmit={handleSubmit}
        />
        <InfiniteScroll
          dataLength={page}
          next={More}
          hasMore={hasMore}
          loader={
            <>
              <br />
              <CircularProgress />
            </>
          }
          style={{
            overflow: "hidden",
          }}
          scrollThreshold={1}
        >
          <CommentList comments={comments} id={session.id} />
        </InfiniteScroll>
      </Drawer>
    </div>

抽屉与 Youtube 在移动应用上的评论抽屉大体相似。我在这里有什么遗漏吗？

Answer 1

可能问题出在 Drawer 和 Infinite Scroll 高度的关系上。无限滚动的高度没有达到触发下一个功能的正确点。如果你提供 Codesandbox 中的演示会更容易理解。