在我的应用程序中查看下面的代码.js组件:

const App = () => {
  const [workstations, setWorkstations] = useState([]);
  let [page, setPage] = useState(1);
  const PER_PAGE = 1;

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

  const loadWorkstations = async () => {
    const request = await getWorkstations();
    const result = request.data;
    setWorkstations(result);
  };

 const count = Math.ceil(workstations.length / PER_PAGE);
  const _DATA = usePagination(workstations, PER_PAGE);

  const handleChange = (e, p) => {
    setPage(p);
    _DATA.jump(p);
  };

return (
 <Pagination
          count={count}
          size="large"
          page={page}
          variant="outlined"
          color="primary"
          onChange={handleChange}
        />
);
};

我从这个实现中得到的结果如下:

enter image description here

but what im looking for should be look like this : enter image description here

我的意思是,我不想在UI上看到我的所有页面,而用"…"显示其余页面

注:即时消息使用@material 界面/实验室

推荐答案

您的代码看起来不错,但是,您需要从@mui导入分页以实现所需的行为

import Pagination from '@mui/material/Pagination';

Javascript相关问答推荐

将数据从strapi提取到next.js,但响应延迟API URL

如何访问Json返回的ASP.NET Core 6中的导航图像属性

模块与独立组件

格式值未保存在redux持久切片中

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

Exceljs:我们在file.xlsx(...)&#中发现了一个问题'"" 39人;

在观察框架中搜索CSV数据

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

如何将react—flanet map添加到remixjs应用程序

使用ThreeJ渲染的形状具有抖动/模糊的边缘

我在Django中的视图中遇到多值键错误

rxjs插入延迟数据

Eval vs函数()返回语义

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

如何组合Multer上传?

是否设置以JavaScript为背景的画布元素?

React数组查找不读取变量

输入数据覆盖JSON文件

找不到处于状态的联系人

如何在单击Search按钮时更新Reaction组件?