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

如何解决react-infinite-scroll 在 Material UI Drawer 中不起作用

我目前正在使用 react-infinite-scroll-component 对某个帖子的评论进行分页。评论部分有一个按钮，显示一个应该显示分页评论的抽屉。问题是，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 评论抽屉大体相似。有什么我在这里遗漏的吗？

解决方法

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