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

麦克斯

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

这是对话框代码:

//imports

export default function Posts() {
  const [open, setOpen] = React.useState(false);
   //more consts
   ...
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);

  const fetchPosts = () => {
    axios.get(`${serverURL}/news?page=${page}`).then((res) => {
      const result = res.data.results;
      setPosts([...posts, ...result]);
      setPage((prev) => prev + 1);
    });
    console.log("page", page);
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <div>
      <h1>News</h1>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open News Dialog
      </Button>
      <Dialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
           News
        </DialogTitle>

        <DialogContent dividers>
          <ul
            style={{
              display: "inline",
            }}
          >
            <InfiniteScroll
              dataLength={posts.length}
              next={() => fetchPosts()}
              hasMore={true}
              loader={<h4 style={{ textAlign: "center" }}>Loading.....</h4>}
              endMessage={
                <p style={{ textAlign: "center" }}>
                  <b>You read all news posts.</b>
                </p>
              }
            >
              {posts.length > 1 &&
                posts.map((post, i) => {
                  return (
                    <div key={i}>
                      <Card className={classes.root}>
                        <div className={classes.details}>
                          <CardContent className={classes.content}>
                            <Typography
                              className={classes.title}
                              component="a"
                              variant="h5"
                            >
                              {post.title}
                            </Typography>
                            <Typography className={classes.desc}>
                                {post.content}
                            </Typography>
                          </CardContent>
                        </div>
                      </Card>
                    </div>
                  );
                })}
            </InfiniteScroll>
            );
          </ul>
        </DialogContent>
      </Dialog>
    </div>
  );
}

日志没有显示我到达第二页,而是到达了后端定义的前30个帖子后才停止。

当我在对话框外测试此代码时,没有任何问题。无限滚动可在此小文本上正常工作:

function App() {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);

  const fetchPosts = () => {
    axios
      .get(`${serverURL}/api/news?page=${page}`)
      .then((res) => {
        const result = res.data.results;
        setPosts([...posts, ...result]);
        setPage((prev) => prev + 1);
      });
    console.log("page", page);
  };

  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <div className="App">
      <InfiniteScroll
        dataLength={posts.length}
        next={() => fetchPosts()}
        hasMore={true}
        loader={<h4>Loading.....</h4>}
        endMessage={
          <p style={{ textAlign: "center" }}>
            <b>You read all news posts.</b>
          </p>
        }
      >
        {posts.length > 1 &&
          posts.map((post, i) => (
            <div key={i}>
              <p>{post.title}</p>
              <p>{post.image}</p>
              <p>{post.content}</p>
              <p>{post.link}</p>
            </div>
          ))}
      </InfiniteScroll>
    </div>
  );
}

export default App;

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

麦克斯

我可以通过将scrollableTarget道具添加到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将该窗口作为目标

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用Firebase在我的Infinite Scroll中首先显示我的热门帖子?

如何在Material-UI对话框上使用withResponsiveFullScreen

渲染日历而无需打开Material-UI React的对话框/模态

如何在调度程序中使用Material-UI对话框?

使用Electron从React Component打开文件对话框

如何在NativeScript对话框中使用DatePicker

如何在React的Material-UI中关闭另一个组件中的对话框?

如何使用material-ui处理“外部”对话框(模态)

在react-infinite-scroll-component中的每个新搜索上替换获取的搜索结果

如何在MFC对话框中使用OnDraw

React Redux + Infinite Scroll =重新渲染整个列表?

使用react-infinite-scroll-component的Firestore限制仅以给定限制滚动

如何在React Native中使用Infinite Scroll?

如何在电子中使用文件对话框?

如何在jQuery对话框中使用ASP控件?

如何在TortoiseGit中使用标准登录对话框而不是GitHub登录对话框?

如何在“对话框”中使用卡片

如何在对话框中使用属性集

如何使用模态对话框 Angular 2 编辑 ngxdatatable

material-ui的maxWidth uncenters对话框(模态)

如何在弹出窗口中使用对话框?

当用户在 JQuery UI 中的模态对话框之外单击时,如何防止模态对话框关闭?

如何在对话框中使用 QnA 服务?

如何在 Material UI 中定位表单对话框?

React Infinite Scroll 超出最大更新深度

如何在 React 中使用多材质 ui 对话框?

react-infinite-scroll-component 用数组加载更多

如何在 Material-UI 中使图像略微偏离对话框

如何在 ReactiveElasticsearchClient 中使用 Scroll API