如何在 Material-UI 对话框模式中使用react-infinite-scroll-component？

Question

我在项目中使用react-infinite-scroll-component，它在对话框之外运行良好。当我滚动到页面底部时，将从服务器获取下一组数据，但我无法在 Material-UI 对话框中获得相同的操作。

\n

这是对话框代码：

\n

//imports\n\nexport default function Posts() {\n  const [open, setOpen] = React.useState(false);\n   //more consts\n   ...\n  const [posts, setPosts] = useState([]);\n  const [page, setPage] = useState(1);\n\n  const fetchPosts = () => {\n    axios.get(`${serverURL}/news?page=${page}`).then((res) => {\n      const result = res.data.results;\n      setPosts([...posts, ...result]);\n      setPage((prev) => prev + 1);\n    });\n    console.log("page", page);\n  };\n\n  useEffect(() => {\n    fetchPosts();\n  }, []);\n\n  return (\n    <div>\n      <h1>News</h1>\n      <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n        Open News Dialog\n      </Button>\n      <Dialog\n        onClose={handleClose}\n        aria-labelledby="customized-dialog-title"\n        open={open}\n      >\n        <DialogTitle id="customized-dialog-title" onClose={handleClose}>\n           News\n        </DialogTitle>\n\n        <DialogContent dividers>\n          <ul\n            style={{\n              display: "inline",\n            }}\n          >\n            <InfiniteScroll\n              dataLength={posts.length}\n              next={() => fetchPosts()}\n              hasMore={true}\n              loader={<h4 style={{ textAlign: "center" }}>Loading.....</h4>}\n              endMessage={\n                <p style={{ textAlign: "center" }}>\n                  <b>You read all news posts.</b>\n                </p>\n              }\n            >\n              {posts.length > 1 &&\n                posts.map((post, i) => {\n                  return (\n                    <div key={i}>\n                      <Card className={classes.root}>\n                        <div className={classes.details}>\n                          <CardContent className={classes.content}>\n                            <Typography\n                              className={classes.title}\n                              component="a"\n                              variant="h5"\n                            >\n                              {post.title}\n                            </Typography>\n                            <Typography className={classes.desc}>\n                                {post.content}\n                            </Typography>\n                          </CardContent>\n                        </div>\n                      </Card>\n                    </div>\n                  );\n                })}\n            </InfiniteScroll>\n            );\n          </ul>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n\n

\n

日志没有\xe2\x80\x99t 显示我到达了第二页，它在我到达后端定义的前 30 个帖子后停止。

\n

当我在对话框之外测试此代码时，没有任何问题。无限滚动在这个小文本上效果很好：

\n

function App() {\n  const [posts, setPosts] = useState([]);\n  const [page, setPage] = useState(1);\n\n  const fetchPosts = () => {\n    axios\n      .get(`${serverURL}/api/news?page=${page}`)\n      .then((res) => {\n        const result = res.data.results;\n        setPosts([...posts, ...result]);\n        setPage((prev) => prev + 1);\n      });\n    console.log("page", page);\n  };\n\n  useEffect(() => {\n    fetchPosts();\n  }, []);\n\n  return (\n    <div className="App">\n      <InfiniteScroll\n        dataLength={posts.length}\n        next={() => fetchPosts()}\n        hasMore={true}\n        loader={<h4>Loading.....</h4>}\n        endMessage={\n          <p style={{ textAlign: "center" }}>\n            <b>You read all news posts.</b>\n          </p>\n        }\n      >\n        {posts.length > 1 &&\n          posts.map((post, i) => (\n            <div key={i}>\n              <p>{post.title}</p>\n              <p>{post.image}</p>\n              <p>{post.content}</p>\n              <p>{post.link}</p>\n            </div>\n          ))}\n      </InfiniteScroll>\n    </div>\n  );\n}\n\nexport default App;\n\n

\n

如何让无限滚动在对话框中工作？

\n

Answer 1

我可以通过将scrollableTargetprop 添加到 DialogContent 来解决此问题，如下所示：

<InfiniteScroll
            dataLength={posts.length}
            next={() => fetchPosts()}
            hasMore={true}
            loader={<h4 style={{ textAlign: "center" }}>Loading.....</h4>}
            endMessage={
              <p style={{ textAlign: "center" }}>
                <b>You read all new posts.</b>
              </p>
            }
            **scrollableTarget="scrollableDiv"**
          >

然后将其添加id="scrollableDiv"到DialogContent：

<DialogContent dividers id="scrollableDiv">
...
</DialogContent>

默认情况下，react-infinite-scroll-component 以整个窗口为目标，因此如果要将其应用于模态，则必须使用scrollableTargetprop. 以该窗口为目标。