ant 组件库分页组件 如何在react中使用，并在每页中放入数据

在 React 中使用 Ant Design 的分页组件，并在每页中放入数据，你可以采用以下步骤：

1. 首先，你需要安装 `antd` 包，可以通过以下命令进行安装：

npm install antd

2. 在你的组件中引入 `Pagination` 组件和需要分页显示的数据：

import { Pagination } from 'antd';

class PageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 分页数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0 // 数据总数
    };
  }

  // 获取分页数据
  fetchData = (page, pageSize) => {
    // 根据当前页码和每页显示条数获取数据
    // 这里只是一个示例，实际项目中要根据实际需求进行修改
    const data = [
      { id: 1, name: '张三', age: 20 },
      { id: 2, name: '李四', age: 22 },
      { id: 3, name: '王五', age: 24 }
    ];
    const total = 3; // 数据总数
    this.setState({
      data,
      total
    });
  };

  // 处理页码改变事件
  handlePageChange = (page, pageSize) => {
    this.setState(
      {
        currentPage: page,
        pageSize
      },
      () => {
        this.fetchData(page, pageSize);
      }
    );
  };

  // 渲染分页数据
  renderData = data => {
    return data.map(item => {
      return (
        <div key={item.id}>
          <p>姓名：{item.name}</p>
          <p>年龄：{item.age}</p>
        </div>
      );
    });
  };

  render() {
    const { data, currentPage, pageSize, total } = this.state;
    return (
      <div>
        {this.renderData(data)}
        <Pagination
          current={currentPage}
          pageSize={pageSize}
          total={total}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

export default PageComponent;

在上述代码中，我们定义了一个 `PageComponent` 组件，其中包含了一个 `fetchData` 函数用于获取分页数据，一个 `handlePageChange` 函数用于处理页码改变事件，以及一个 `renderData` 函数用于渲染分页数据。

在 `render` 方法中，我们首先通过 `this.renderData(data)` 渲染了当前页的数据，然后使用 `Pagination` 组件进行分页显示，并通过 `current`、`pageSize` 和 `total` 属性指定了当前页码、每页显示条数和总数据条数。

在 `Pagination` 组件的 `onChange` 属性中，我们设置了一个回调函数 `handlePageChange`，用于在页码改变时重新获取分页数据并更新组件状态。

希望这个回答能够帮助到你！