react 分页

介绍 (Introduction)

Often times, we get involved in building web apps in which we are required to fetch large sets of data records from a remote server, API, or some database sitting somewhere. If you are building a payment system for example, it could be fetching thousands of transactions. If it is a social media app, it could be fetching lots of user comments, profiles, or activities. Whichever it is, there are a couple of methods for handling the data such that it doesn’t become overwhelming to the end-user interacting with the app.

通常，我们会参与构建Web应用程序，在这些应用程序中，我们需要从远程服务器，API或某个地方的某些数据库中获取大量数据记录。 例如，如果您要建立一个支付系统，它可能会获取数千笔交易。 如果它是社交媒体应用程序，则可能会获取大量用户评论，个人资料或活动。 无论是哪种方式，都有两种方法可以处理数据，以使数据不会对最终用户与该应用程序进行交互产生压力。

One of the popular methods for handling large datasets on the view is by using the - where more data is loaded in chunks as the user continues scrolling very close to the end of the page. This is the technique used in displaying search results in Google Images. It is also used in so many social media platforms like Facebook - displaying posts on timeline, Twitter - showing recent tweets, etc.

在视图上处理大型数据集的一种流行方法是使用 -当用户继续滚动到页面末尾时，更多数据以块的形式加载。 这是用于在Google图片中显示搜索结果的技术。 它也用在许多社交媒体平台(如Facebook)中-在时间轴上显示帖子，在Twitter上-显示最近的推文等。

Another known method for handling large datasets is using . Pagination works effectively when you already know the size of the dataset (the total number of records in the dataset) upfront. Secondly, you only load the required chunk of data from the total dataset based on the end-users interaction with the pagination control. This is the technique used in displaying search results in Google Search.

处理大型数据集的另一种已知方法是使用 。 当您已经预先知道数据集的大小(数据集中的记录总数)时，分页有效。 其次，仅基于最终用户与分页控件的交互从总数据集中加载所需的数据块。 这是在Google搜索中显示搜索结果的技术。

In this tutorial, we will see how to build a custom pagination component with React for paginating large datasets. We will build a paginated view of the countries in the world, because we already have this data.

在本教程中，我们将看到如何使用React构建自定义的分页组件以对大型数据集进行分页。 因为我们已经有了这些数据，所以我们将对世界各国进行分页查看。

Here is a demo of what we will be building in this tutorial.

这是我们将在本教程中构建的演示。

先决条件 (Prerequisites)

Before getting started, you need to ensure that you have already installed on your machine. I will also recommend that you install the package manager on your machine, since we will be using it for package management instead of that ships with Node. You can follow this to install yarn on your machine.

在开始之前，您需要确保计算机上已经安装了 。 我还将建议您在计算机上安装软件包管理器，因为我们将使用它来进行软件包管理，而不是Node附带的 。 您可以按照本在机器上安装yarn 。

We will create the boilerplate code for our React app using the command-line package. You also need to ensure that it is installed globally on your machine. If you are using npm >= 5.2 then you may not need to install create-react-app as a global dependency since we can use the npx command.

我们将使用命令行软件包为React应用创建样板代码。 您还需要确保将其全局安装在您的计算机上。 如果您使用的是npm >= 5.2那么您可能不需要安装create-react-app作为全局依赖项，因为我们可以使用npx命令。

Finally, this tutorial assumes that you are already familiar with React. If that is not the case, you can check the to learn more about React.

最后，本教程假定您已经熟悉React。 如果不是这种情况，您可以查看以了解有关React的更多信息。

入门 (Getting Started)

创建新的应用程序 (Create new Application)

Start a new React application using the following command. You can name the application however you desire.

使用以下命令启动一个新的React应用程序。 您可以根据需要命名应用程序。

Note: If you are using npm version 5.2 or higher, it ships with an additional npx binary. Using the npx binary, you don’t need to install create-react-app globally on your machine. You can start a new React application with this command:

注意：如果您使用的是npm 5.2或更高版本，它将附带一个附加的npx二进制文件。 使用npx二进制文件，您无需在计算机上全局安装create-react-app 。 您可以使用以下命令启动新的React应用程序：

安装依赖项 (Installing Dependencies)

Next, we will install the dependencies we need for our application. Run the following command to install the required dependencies:

接下来，我们将安装应用程序所需的依赖项。 运行以下命令以安装所需的依赖项：

We have installed node-sass-chokidar as a development dependency for our application to enable us to use SASS. For more information about this, see .

我们已将node-sass-chokidar安装为应用程序的开发依赖项，以使我们能够使用SASS。 有关此的更多信息，请参阅 。

Now open the src directory and change the file extension of all the .css files to .scss. The required .css files will be compiled by node-sass-chokidar as we continue.

现在打开src目录，并将所有.css文件的文件扩展名更改为.scss 。 继续操作时，所需的.css文件将由node-sass-chokidar编译。

修改npm脚本 (Modifying the npm Scripts)

Edit the package.json file and modify the scripts section to look like the following:

编辑package.json文件并修改scripts部分，使其如下所示：

"scripts": {  "start:js": "react-scripts start",  "build:js": "react-scripts build",  "start": "npm-run-all -p watch:css start:js",  "build": "npm-run-all build:css build:js",  "test": "react-scripts test --env=jsdom",  "eject": "react-scripts eject",  "build:css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",  "watch:css": "npm run build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive"}

包括Bootstrap CSS (Including Bootstrap CSS)

We installed the bootstrap package as a dependency for our application since we will be needing some default styling. We will also be using styles from the Bootstrap pagination component. To include Bootstrap in the application, edit the src/index.js file and add the following line before every other import statement.

我们安装了bootstrap软件包作为应用程序的依赖项，因为我们将需要一些默认样式。 我们还将使用Bootstrap分页组件中的样式。 要将Bootstrap包含在应用程序中，请编辑src/index.js文件，并在所有其他import语句之前添加以下行。

import "bootstrap/dist/css/bootstrap.min.css";

设置标志图标 (Setting Up Flag Icons)

We installed react-flags as a dependency for our application. In order to get access to the flag icons from our application, we will need to copy the icon images to the public directory of our application. Run the following commands from your terminal to copy the flag icons.

我们安装了react-flags作为我们应用程序的依赖项。 为了从我们的应用程序访问标记图标，我们需要将图标图像复制到我们的应用程序的public目录中。 从终端运行以下命令以复制标志图标。

components目录 (The components directory)

We will create the following React components for our application.

我们将为我们的应用程序创建以下React组件。

• CountryCard - This renders the name, region and flag of a given country.

  CountryCard呈现给定国家的名称，地区和标志。

• Pagination - This contains the whole logic for building, rendering and switching pages on the pagination control.

  Pagination -包含在分页控件上构建，呈现和切换页面的整个逻辑。

Go ahead and create a components directory inside the src directory of the application to house all our components.

继续，在应用程序的src目录中创建一个components目录，以容纳我们所有的组件。

开始申请 (Starting the Application)

Start the application by running the following command with yarn:

通过对yarn运行以下命令来启动应用程序：

The application is now started and development can begin. Notice that a browser tab has been opened for you with live reloading functionality to keep in sync with changes in the application as you develop.

现在，该应用程序已启动，可以开始开发了。 请注意，已为您打开了具有实时重新加载功能的浏览器选项卡，以在您开发时与应用程序中的更改保持同步。

At this point, the application view should look like the following screenshot:

此时，应用程序视图应类似于以下屏幕截图：

CountryCard组件 (The CountryCard Component)

Create a new file CountryCard.js in the src/components directory and add the following code snippet to it.

在src/components目录中创建一个新文件CountryCard.js ，并将以下代码片段添加到其中。

import React from 'react';import PropTypes from 'prop-types';import Flag from 'react-flags';const CountryCard = props => {  const { cca2: code2 = '', region = null, name = {}  } = props.country || {};  return (    
    
      
     
        
      
          
               
      
        
      
          
       { name.common }          
       { region }        
      
      
     
    
    
  )}CountryCard.propTypes = {  country: PropTypes.shape({    cca2: PropTypes.string.isRequired,    region: PropTypes.string.isRequired,    name: PropTypes.shape({      common: PropTypes.string.isRequired    }).isRequired  }).isRequired};export default CountryCard;

The CountryCard component requires a country prop that contains the data about the country to be rendered. As seen in the propTypes for the CountryCard component, the country prop object must contain the following data:

CountryCard组件需要一个country道具，其中包含有关要渲染的国家的数据。 正如所见propTypes为CountryCard部件，所述country丙对象必须包含以下数据：

• cca2 - 2-digit country code

  cca2位国家/地区代码

• region - the country region e.g Africa

  region -国家地区，例如非洲

• name.common - the common name of the country e.g Nigeria

  name.common国家的通用名称，例如尼日利亚

Here is a sample country object:

这是一个示例国家对象：

{  cca2: "NG",  region: "Africa",  name: {    common: "Nigeria"  }}

Also notice how we render the country flag using the react-flags package. You can check the to learn more about the required props and how to use the package.

还要注意我们如何使用react-flags包渲染国家/地区标志。 您可以查看以了解有关所需道具以及如何使用软件包的更多信息。

Pagination组件 (The Pagination Component)

Create a new file Pagination.js in the src/components directory and add the following code snippet to it.

在src/components目录中创建一个新文件Pagination.js ，并将以下代码片段添加到其中。

import React, { Component, Fragment } from 'react';import PropTypes from 'prop-types';class Pagination extends Component {  constructor(props) {    super(props);    const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;    this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 30;    this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0;    // pageNeighbours can be: 0, 1 or 2    this.pageNeighbours = typeof pageNeighbours === 'number'      ? Math.max(0, Math.min(pageNeighbours, 2))      : 0;    this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);    this.state = { currentPage: 1 };  }}Pagination.propTypes = {  totalRecords: PropTypes.number.isRequired,  pageLimit: PropTypes.number,  pageNeighbours: PropTypes.number,  onPageChanged: PropTypes.func};export default Pagination;

The Pagination component can take four special props as specified in the propTypes object.

Pagination组件可以采用propTypes对象中指定的四个特殊道具。

• totalRecords - indicates the total number of records to be paginated. It is required.

  totalRecords指示要分页的记录总数。 它是必需的。

• pageLimit - indicates the number of records to be shown per page. If not specified, it defaults to 30 as defined in the constructor().

  pageLimit指示pageLimit显示的记录数。 如果未指定，则默认值为30 (在constructor()定义constructor() 。

• pageNeighbours - indicates the number of additional page numbers to show on each side of the current page. The minimum value is 0 and the maximum value is 2. If not specified, it defaults to 0 as defined in the constructor(). The following image illustrates the effect of different values of the pageNeighbours prop:

  pageNeighbours指示要在当前页面的每一侧显示的其他页面号的数量。 最小值为0 ，最大值为2 。 如果未指定，则默认为0 (在constructor()定义constructor() 。 下图说明了pageNeighbours道具的不同值的影响：

• onPageChanged - is a function that will be called with data of the current pagination state only when the current page changes.

  onPageChanged是仅当当前页面更改时才使用当前分页状态的数据调用的函数。

In the constructor() function, we compute the total pages as follows:

在constructor()函数中，我们计算总页数如下：

this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);

Notice that we use Math.ceil() here to ensure that we get an integer value for the total number of pages. This also ensures that the excess records are captured in the last page, especially in cases where the number of excess records is less than the number of records to be shown per page.

请注意，我们在此处使用Math.ceil()来确保获得的总页数为整数值。 这也可以确保多余的记录被捕获在最后一页中，特别是在多余的记录数少于每页要显示的记录数的情况下。

Finally, we initialize the state with the currentPage property set to 1. We need this state property to internally keep track of the currently active page.

最后，我们将currentPage属性设置为1来初始化状态。 我们需要此状态属性来内部跟踪当前活动的页面。

Next, we will go ahead and create the method for generating the page numbers. Modify the Pagination component as shown in the following code snippet:

接下来，我们将继续创建用于生成页码的方法。 修改Pagination组件，如以下代码片段所示：

const LEFT_PAGE = 'LEFT';const RIGHT_PAGE = 'RIGHT';/** * Helper method for creating a range of numbers * range(1, 5) => [1, 2, 3, 4, 5] */const range = (from, to, step = 1) => {  let i = from;  const range = [];  while (i <= to) {    range.push(i);    i += step;  }  return range;}class Pagination extends Component {  /**   * Let's say we have 10 pages and we set pageNeighbours to 2   * Given that the current page is 6   * The pagination control will look like the following:   *   * (1) < {4 5} [6] {7 8} > (10)   *   * (x) => terminal pages: first and last page(always visible)   * [x] => represents current page   * {...x} => represents page neighbours   */  fetchPageNumbers = () => {    const totalPages = this.totalPages;    const currentPage = this.state.currentPage;    const pageNeighbours = this.pageNeighbours;    /**     * totalNumbers: the total page numbers to show on the control     * totalBlocks: totalNumbers + 2 to cover for the left(<) and right(>) controls     */    const totalNumbers = (this.pageNeighbours * 2) + 3;    const totalBlocks = totalNumbers + 2;    if (totalPages > totalBlocks) {      const startPage = Math.max(2, currentPage - pageNeighbours);      const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);      let pages = range(startPage, endPage);      /**       * hasLeftSpill: has hidden pages to the left       * hasRightSpill: has hidden pages to the right       * spillOffset: number of hidden pages either to the left or to the right       */      const hasLeftSpill = startPage > 2;      const hasRightSpill = (totalPages - endPage) > 1;      const spillOffset = totalNumbers - (pages.length + 1);      switch (true) {        // handle: (1) < {5 6} [7] {8 9} (10)        case (hasLeftSpill && !hasRightSpill): {          const extraPages = range(startPage - spillOffset, startPage - 1);          pages = [LEFT_PAGE, ...extraPages, ...pages];          break;        }        // handle: (1) {2 3} [4] {5 6} > (10)        case (!hasLeftSpill && hasRightSpill): {          const extraPages = range(endPage + 1, endPage + spillOffset);          pages = [...pages, ...extraPages, RIGHT_PAGE];          break;        }        // handle: (1) < {4 5} [6] {7 8} > (10)        case (hasLeftSpill && hasRightSpill):        default: {          pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];          break;        }      }      return [1, ...pages, totalPages];    }    return range(1, totalPages);  }}

Here, we first define two constants: LEFT_PAGE and RIGHT_PAGE. These constants will be used to indicate points where we have page controls for moving left and right respectively.

在这里，我们首先定义两个常量： LEFT_PAGE和RIGHT_PAGE 。 这些常量将用于指示我们具有分别用于向左和向右移动的页面控件的点。

We also define a helper range() function that can help us generate ranges of numbers. If you use a utility library like in your project, then you can use the _.range() function provided by Lodash instead. The following code snippet shows the difference between the range() function we just defined and the one from Lodash:

我们还定义了一个helper range()函数，可以帮助我们生成数字范围。 如果使用工具库一样在你的项目，那么你可以使用_.range()由Lodash提供替代功能。 以下代码段显示了我们刚刚定义的range()函数与Lodash中的函数之间的区别：

range(1, 5); // returns [1, 2, 3, 4, 5]_.range(1, 5); // returns [1, 2, 3, 4]

Next, we define the fetchPageNumbers() method in the Pagination class. This method handles the core logic for generating the page numbers to be shown on the pagination control. We want the first page and last page to always be visible.

接下来，我们在Pagination类中定义fetchPageNumbers()方法。 此方法处理用于生成要在分页控件上显示的页码的核心逻辑。 我们希望首页和最后一页始终可见。

First, we define a couple of variables. totalNumbers represents the total page numbers that will be shown on the control. totalBlocks represents the total page numbers to be shown plus two additional blocks for left and right page indicators.

首先，我们定义几个变量。 totalNumbers表示将在控件上显示的总页数。 totalBlocks表示要显示的总页数，另外两个用于左右页面指示器的块。

If totalPages is not greater than totalBlocks, we return a range of numbers from 1 to totalPages. Otherwise, we return the array of page numbers, with LEFT_PAGE and RIGHT_PAGE at points where we have pages spilling to the left and right respectively.

如果totalPages不大于totalBlocks ，则返回从1到totalPages的数字范围。 否则，我们将返回页码数组，其中LEFT_PAGE和RIGHT_PAGE位于页面分别向左和向右溢出的位置。

Notice however that our pagination control ensures that the first page and last page are always visible. The left and right page controls appear inwards.

但是请注意，我们的分页控件可确保第一页和最后一页始终可见。 左右页面控件向内显示。

Now we will go ahead and add the render() method to enable us to render the pagination control. Modify the Pagination component as shown in the following snippet:

现在，我们将继续并添加render()方法，以使我们能够呈现分页控件。 修改Pagination组件，如以下代码片段所示：

class Pagination extends Component {render() {    if (!this.totalRecords || this.totalPages === 1) return null;    const { currentPage } = this.state;    const pages = this.fetchPageNumbers();    return (      
            
           
        );  }}

Here, we generate the page numbers array by calling the fetchPageNumbers() method we created earlier. We then render each page number using Array.prototype.map(). Notice that we register click event handlers on each rendered page number to handle clicks.

在这里，我们通过调用我们之前创建的fetchPageNumbers()方法来生成页码array 。 然后，我们使用Array.prototype.map()渲染每个页码。 请注意，我们在每个呈现的页码上注册了click事件处理程序，以处理单击。

Also notice that the pagination control will not be rendered if the totalRecords prop was not passed in correctly to the Pagination component or in cases where there is only 1 page.

还要注意的是，分页控制不会，如果所呈现的totalRecords道具不是在正确的传递Pagination组件或在情况下，有只有1页。

Finally, we will define the event handler methods. Modify the Pagination component as shown in the following snippet:

最后，我们将定义事件处理程序方法。 修改Pagination组件，如以下代码片段所示：

class Pagination extends Component {  componentDidMount() {    this.gotoPage(1);  }  gotoPage = page => {    const { onPageChanged = f => f } = this.props;    const currentPage = Math.max(0, Math.min(page, this.totalPages));    const paginationData = {      currentPage,      totalPages: this.totalPages,      pageLimit: this.pageLimit,      totalRecords: this.totalRecords    };    this.setState({ currentPage }, () => onPageChanged(paginationData));  }  handleClick = page => evt => {    evt.preventDefault();    this.gotoPage(page);  }  handleMoveLeft = evt => {    evt.preventDefault();    this.gotoPage(this.state.currentPage - (this.pageNeighbours * 2) - 1);  }  handleMoveRight = evt => {    evt.preventDefault();    this.gotoPage(this.state.currentPage + (this.pageNeighbours * 2) + 1);  }}

We define the gotoPage() method that modifies the state and sets the currentPage to the specified page. It ensures that the page argument has a minimum value of 1 and a maximum value of the total number of pages. It finally calls the onPageChanged() function that was passed in as prop, with data indicating the new pagination state.

我们定义gotoPage()方法，该方法修改状态并将currentPage设置为指定的页面。 它确保page参数的最小值为1 ，最大值为总页数。 最后，它将调用作为onPageChanged()传入的onPageChanged()函数，其中的数据指示新的分页状态。

When the component mounts, we go to the first page by calling this.gotoPage(1) as shown in the componentDidMount() lifecycle method.

装入组件后，我们通过调用this.gotoPage(1)转到第一页，如componentDidMount()生命周期方法所示。

Notice how we use (this.pageNeighbours * 2) in handleMoveLeft() and handleMoveRight() to slide the page numbers to the left and to the right respectively based on the current page number.

请注意，我们如何在handleMoveLeft()和handleMoveRight()使用(this.pageNeighbours * 2)根据当前页码分别向左和向右滑动页码。

Here is a demo of the interaction of the left to right movement.

这是一个左右运动交互的演示。

App组件 (The App Component)

We will go ahead and modify the App.js file in the src directory. The App.js file will look like the following snippet:

我们将继续修改src目录中的App.js文件。 App.js文件将类似于以下片段：

import React, { Component } from 'react';import Countries from 'countries-api';import './App.css';import Pagination from './components/Pagination';import CountryCard from './components/CountryCard';class App extends Component {  state = { allCountries: [], currentCountries: [], currentPage: null, totalPages: null }  componentDidMount() {    const { data: allCountries = [] } = Countries.findAll();    this.setState({ allCountries });  }  onPageChanged = data => {    const { allCountries } = this.state;    const { currentPage, totalPages, pageLimit } = data;    const offset = (currentPage - 1) * pageLimit;    const currentCountries = allCountries.slice(offset, offset + pageLimit);    this.setState({ currentPage, currentCountries, totalPages });  }}export default App;

Here we initialize the App component’s state with the following attributes:

在这里，我们使用以下属性初始化App组件的状态：

• allCountries - an array of all the countries in our app. Initialized to an empty array([]).

  allCountries应用程式中所有国家/地区的阵列。 初始化为空数组( [] )。

• currentCountries - an array of all the countries to be shown on the currently active page. Initialized to an empty array([]).

  currentCountries要在当前活动页面上显示的所有国家/地区的数组。 初始化为空数组( [] )。

• currentPage - the page number of the currently active page. Initialized to null.

  currentPage当前活动页面的页码。 初始化为null 。

• totalPages - the total number of pages for all the country records. Initialized to null.

  totalPages所有国家/地区记录的总页数。 初始化为null 。

Next, in the componentDidMount() lifecycle method, we fetch all the world countries using the countries-api package by invoking Countries.findAll(). We then update the app state, setting allCountries to contain all the world countries. You can see the to learn more about the package.

接下来，在componentDidMount()生命周期方法中，我们通过调用Countries.findAll()来使用countries-api包来获取世界所有Countries.findAll() 。 然后，我们更新应用状态，将allCountries设置为包含世界所有国家。 您可以查看以了解有关该软件包的更多信息。

Finally, we defined the onPageChanged() method, which will be called each time we navigate to a new page from the pagination control. This method will be passed to the onPageChanged prop of the Pagination component.

最后，我们定义了onPageChanged()方法，该方法将在每次我们从分页控件导航到新页面时调用。 该方法将传递给Pagination组件的onPageChanged 。

There are two lines that are worth paying attention to in this method. The first is this line:

此方法有两行值得关注。 首先是这一行：

const offset = (currentPage - 1) * pageLimit;

The offset value indicates the starting index for fetching the records for the current page. Using (currentPage - 1) ensures that the offset is zero-based. Let’s say for example that we are displaying 25 records per page and we are currently viewing page 5. Then the offset will be ((5 - 1) * 25 = 100).

offset值指示用于获取当前页面记录的起始索引。 使用(currentPage - 1)确保偏移量从零开始。 例如，假设我们每页显示25条记录，而当前正在查看第5页。 那么offset将是((5 - 1) * 25 = 100) 。

In fact, if you are fetching records on demand from a database for example, this is a sample SQL query to show you how offset can be used:

实际上，例如，如果您要从数据库中按需获取记录，则此示例SQL查询向您展示如何使用偏移量：

SELECT * FROM `countries` LIMIT 100, 25

Since, we are not fetching records on demand from a database or any external source, we need a way to extract the required chunk of records to be shown for the current page. That brings us to the second line:

由于我们不是从数据库或任何外部源中按需获取记录，因此我们需要一种方法来提取要显示在当前页面上的所需记录块。 这使我们进入第二行：

const currentCountries = allCountries.slice(offset, offset + pageLimit);

Notice here that we use the Array.prototype.slice() method to extract the required chunk of records from allCountries by passing the offset as the starting index for the slice and (offset + pageLimit) as the index before which to end the slice.

请注意，这里我们使用Array.prototype.slice()方法通过将offset作为切片的起始索引，并通过(offset + pageLimit)作为结束切片之前的索引，从allCountries提取所需的记录块。

Note: Fetching records in real applications In this tutorial we did not fetch records from any external source. In a real application, you will probably be fetching records from a database or an API. The logic for fetching the records can go into the onPageChanged() method of the App component.

注意：在实际应用程序中获取记录在本教程中，我们没有从任何外部来源获取记录。 在实际的应用程序中，您可能会从数据库或API中获取记录。 提取记录的逻辑可以进入App组件的onPageChanged()方法。

Let’s say we have a fictitious API endpoint /api/countries?page={current_page}&limit={page_limit}. The following snippet shows how we can fetch countries on demand from the API using the HTTP package:

假设我们有一个虚构的API端点/api/countries?page={current_page}&limit={page_limit} 。 以下代码段显示了如何使用 HTTP包从API中按需获取国家/地区：

onPageChanged = data => {  const { currentPage, totalPages, pageLimit } = data;  axios.get(`/api/countries?page=${currentPage}&limit=${pageLimit}`)    .then(response => {      const currentCountries = response.data.countries;      this.setState({ currentPage, currentCountries, totalPages });    });}

Now we will go ahead and finish up the App component by adding the render() method. Modify the App component accordingly as shown in the following snippet:

现在，我们将通过添加render()方法完成App组件。 相应地修改App组件，如以下代码片段所示：

class App extends Component {  // other methods here ...  render() {    const { allCountries, currentCountries, currentPage, totalPages } = this.state;    const totalCountries = allCountries.length;    if (totalCountries === 0) return null;    const headerClass = ['text-dark py-2 pr-4 m-0', currentPage ? 'border-gray border-right' : ''].join(' ').trim();    return (      
    
        
     
          
      
            
       
              
        
                {totalCountries} Countries              
              { currentPage && (                
                          Page { currentPage } / { totalPages }                              ) }            
       
            
       
              
                    
       
          
      
          { currentCountries.map(country => 
      ) }        
     
      
    
    );  }}

The render() method is quite straightforward. We render the total number of countries, the current page, the total number of pages, the <Pagination> control and then the <CountryCard> for each country in the current page.

render()方法非常简单。 我们呈现当前页面中每个国家的<CountryCard>总数，当前页面，页面总数， <Pagination>控件，然后是<CountryCard> 。

Notice that we passed the onPageChanged() method we defined earlier to the onPageChanged prop of the <Pagination> control. This is very important for capturing page changes from the Pagination component. Also notice that we are displaying 18 countries per page.

请注意，我们onPageChanged()先前定义的onPageChanged()方法传递给<Pagination>控件的onPageChanged 。 这对于从Pagination组件捕获页面更改非常重要。 另请注意，我们每页显示18个国家。

At this point, the app will look like the following screenshot:

此时，该应用将类似于以下屏幕截图：

升级某些样式 (Levelling up with some styles)

You would have noticed that we have been adding some custom classes to the components we created earlier. We will go ahead and define some style rules for those classes in the src/App.scss file. The App.scss file will look like the following snippet:

您可能已经注意到，我们已经向我们先前创建的组件中添加了一些自定义类。 我们将继续在src/App.scss文件中为这些类定义一些样式规则。 App.scss文件将类似于以下片段：

/* Declare some variables */$base-color: #ced4da;$light-background: lighten(desaturate($base-color, 50%), 12.5%);.current-page {  font-size: 1.5rem;  vertical-align: middle;}.country-card-container {  height: 60px;  cursor: pointer;  position: relative;  overflow: hidden;}.country-name {  font-size: 0.9rem;}.country-region {  font-size: 0.7rem;}.current-page,.country-name,.country-region {  line-height: 1;}// Override some Bootstrap pagination stylesul.pagination {  margin-top: 0;  margin-bottom: 0;  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);  li.page-item.active {    a.page-link {      color: saturate(darken($base-color, 50%), 5%) !important;      background-color: saturate(lighten($base-color, 7.5%), 2.5%) !important;      border-color: $base-color !important;    }  }  a.page-link {    padding: 0.75rem 1rem;    min-width: 3.5rem;    text-align: center;    box-shadow: none !important;    border-color: $base-color !important;    color: saturate(darken($base-color, 30%), 10%);    font-weight: 900;    font-size: 1rem;    &:hover {      background-color: $light-background;    }  }}

After adding the styles, the app will now look like the following screenshot:

添加样式后，该应用程序现在将类似于以下屏幕截图：

结论 (Conclusion)

In this tutorial, we have been able to create a custom pagination widget in our React application. Although we didn’t make calls to any API or interact with any database back-end in this tutorial, it is possible that your application may demand such interactions. You are not in any way limited to the approach used in this tutorial - you can extend it as you wish to suit the requirements of your application.

在本教程中，我们已经能够在React应用程序中创建自定义分页小部件。 尽管在本教程中我们没有调用任何API或与任何数据库后端进行交互，但是您的应用程序可能需要这种交互。 您决不限于本教程中使用的方法-您可以根据需要扩展它以适合您的应用程序的需求。

For the complete source code of this tutorial, checkout the repository on Github. You can also get a .

有关本教程的完整源代码，请检查Github上的存储库。 您还可以获得的 。

翻译自:

react 分页