React使用antd实现分页功能

本资源是关于使用React框架实现分页功能的一个示例代码文档，主要涉及React组件化开发、状态管理、以及Ant Design库的使用。在实现过程中，还引入了Axios库进行数据请求，并对请求进行了封装。 在React应用中实现分页功能，首先需要确保已经安装了Ant Design库（antd）和Axios库，这两个库分别是用于UI组件和网络请求的。在jsx文件中，我们导入了React的基本组件，如useState和useEffect，以及Ant Design的Pagination组件。 jsx文件中的`App`组件是整个分页功能的核心。通过`useState`钩子函数来管理当前页面编号`num`，初始值设为1。同时，`useState`也被用来创建一个数据载体`data`，用于存储从服务器获取的数据。 `useEffect`是一个React的生命周期方法，它会在组件挂载后和`num`改变时执行。在这个例子中，`useEffect`内部调用了自定义的`Unit.getApi2`函数，这是一个封装了Axios的函数，用于发送GET请求获取数据。请求参数包括当前的`page_number`（页面号）和`page_size`（每页数据量）。 当用户点击分页按钮时，`onChange`事件会触发，传递当前选中的页码给`add`函数，更新`num`的状态，从而触发重新渲染并获取新的数据。分页组件`Pagination`的`defaultCurrent`属性设置为`num`，表示默认显示的页码，`total`属性则设置为总条目数，这里是500。 此外，还提供了一个名为`loading.scss`的文件，其中导入了Ant Design的CSS样式，以解决样式问题。而在`hml.js`文件中，可以看到一个Axios的封装，用于简化HTTP请求。 这个React应用实例展示了如何结合Ant Design的Pagination组件，利用React的状态管理和生命周期方法实现分页功能，同时通过Axios处理网络请求。开发者可以根据自己的需求调整代码，以适应不同的数据源和分页配置。