javascript - 我如何才能对我的项目实施分页

问题描述

所以我最近完成了一个我正在处理的项目，它显示了一个口袋妖怪列表，一旦点击，用户就会被定向到口袋妖怪信息页面。

它看起来如下：

所以我有我的主dashboard.js，其中包含我的“PokemonList”，如下所示：

import React, { Component } from "react";
import styled from "styled-components";
import PokemonList from "../pokemon/PokemonList";

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col">
            <PokemonList />
          </div>
        </div>
      </div>
    );
  }
}

我的 PokemonList.js 负责从 PokeAPI 获取 Pokemon 信息，代码如下：

import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import axios from "axios";

export default class PokemonList extends Component {
  state = {
    url: "http://pokeapi.co/api/v2/pokemon/?limit=600",
    pokemon: null
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokemon: res.data["results"] });
  }
  render() {
    return (
      <React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            {this.state.pokemon.map(pokemon => (
              <PokemonCard
                key={pokemon.name}
                name={pokemon.name}
                url={pokemon.url}
              />
            ))}
          </div>
        ) : (
          <h1>Loading Pokemon</h1>
        )}
      </React.Fragment>
    );
  }
}

pokemonList 是由几个 pokemonCards 构建的，然后显示，但我认为我正在寻找的东西不需要编码。

如果我想启用分页，我是否必须将代码合并到我的 Dashboard.js 或 pokemonList.js 中？

- - - - - - - - - - - -编辑 - - - - - - - - - - - - - ------------

标签： javascriptreactjs

你可以使用的是这个库：https ://www.npmjs.com/package/react-js-pagination

然后在您的代码中，分页将是这样的：

    <Pagination
      activePage={this.state.activePage}
      itemsCountPerPage={this.state.itemsCountPerPage}
      totalItemsCount={this.state.pokemon.length}
      pageRangeDisplayed={5}
      onChange={::this.handlePageChange.bind(this)}
    />

处理页面更改功能：

handlePageChange(pageNumber) {
    this.setState({activePage: pageNumber});
  }

然后在你的 pokemonList.js 的渲染函数中：

let indexOfLastTodo = this.state.activePage * this.state.itemsCountPerPage;
let indexOfFirstTodo = indexOfLastTodo - this.state.itemsCountPerPage;
let renderedPokemons = this.state.pokemon.slice(indexOfFirstTodo, indexOfLastTodo);

最后

{renderedPokemons.map(pokemon => (
              <PokemonCard
                key={pokemon.name}
                name={pokemon.name}
                url={pokemon.url}
              />
                ))}

当然不要忘记在您的状态中包含 activePage 和 itemsCountPerPage。我想我在我早期的一个项目中做过类似的事情。享受！

javascript - 我如何才能对我的项目实施分页

问题描述

解决方案

推荐阅读