前端项目实战壹佰壹拾肆react-admin+material ui-踩坑-react-admin之InfiniteList之加载更多

最新推荐文章于 2024-07-24 10:40:52 发布

前端歌谣

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量21

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/131722927

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

我是歌谣这里是歌谣的前端笔记小屋想加入前端巅峰人才交流群私信我

import { InfiniteList, useInfinitePaginationContext, Datagrid, TextField } from 'react-admin';
import { Box, Button } from '@mui/material';

const LoadMore = () => {
    const {
        hasNextPage,
        fetchNextPage,
        isFetchingNextPage,
    } = useInfinitePaginationContext();
    return hasNextPage ? (
        <Box mt={1} textAlign="center">
            <Button
                disabled={isFetchingNextPage}
                onClick={() => fetchNextPage()}
            >
                Load more
            </Button>
        </Box>
    ) : null;
};

export const BookList = () => (
    <InfiniteList pagination={<LoadMore />}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <TextField source="author" />
        </Datagrid>
    </InfiniteList>
);