2

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

这是代码：

    <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 在移动应用上的评论抽屉。我在这里有什么遗漏吗？

4

1 回答 1

1

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

于 2021-07-21T20:46:09.660 回答