在react中如何结合antd实现分页功能

在react中如何结合antd实现分页功能

步骤如下
1安装antd

npm i  antd  --s

2在 src/App.css中引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

3在需要用分页器的组件中引入

import { Pagination } from 'antd'

4在构造函数中设置current

 constructor(props) {
    super(props);
    this.state = {
      current: 1, //当前页码,
      showList=[xxxx]
    };
 }

5在render函数中引入Pagination标签，及在上面配置要展示数据的总数total,每页条数pageSize,当前页数current等你想要配置的参数，比如要将一个showList的数组分页展示，每页五条；

6onChange函数，通过此可以获得点击的页面page，将其设置给state中，进而可以通过其页码，刷选出对应页面对应数据来实现分页展示的功能

    onChange = page => {
    console.log(page);
    this.setState({
      current: page,
    });
  };

7值得注意的是点击页码按钮，获得页码page,在onChange函数中可以直接传参page获得,完成。