如何在 reactJs 子组件中实现分页

Question

我是 ReactJS 的新手，我正在其中创建一个简单的 TODO 应用程序。实际上，它是一个非常基本的应用程序，没有数据库连接，任务存储在一个数组中，我想在子组件中为其添加分页。 代码在这里。

import React from 'react'
import './listItem.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import FlipMove from 'react-flip-move'
function toDoList(props) {
    const items = props.items; //From parent Component

    const lisitems = items.map(item => {
        return (
            <div className="list" key={item.key}>
                <p>
                    <input type="text" id={item.key} value={item.text} 
                    onChange={(e)=>{props.setUpdate(e.target.value,item.key)}
                }/>
                <span> 
                    <FontAwesomeIcon className="faicons" icon="trash"
                    onClick={()=>props.deleteItem(item.key)} 
                    />  //Also from parent
                </span>
                </p>

            </div>
        )
    })

    return (
        <div> // I Want here to add pagination
            <FlipMove duration={300} easing="ease-in-out">
            {lisitems}
            </FlipMove>
            </div>
    )
}
export default toDoList

Answer 1

有两种方法可以解决；制作自己的简单分页解决方案或使用强大的库react-paginate。下面是一个从头开始制作的简单分页解决方案。

也是一个可行的解决方案：Codesandbox link

import React, { useState } from "react";

    function ToDoList(props) {
          const { items } = props;
          const [offset, setOffset] = useState(0);
          const itemsPerPage = 2;

          const changePage = offset => {
            setOffset(offset); // if second page, then items start from 10th item to 15th
          };

          let listItems = [];
          const page = offset * itemsPerPage;
          for (let i = page; i < page + itemsPerPage; i++) {
            if (i >= items.length) {
              break;
            }
            listItems.push(items[i]);
          }

          listItems = listItems.map((item, idx) => {
            return <p key={`list-${idx}`}>{item.name}</p>;
          });

          const btns = [];
          for (let i = 1; i <= Math.ceil(items.length / itemsPerPage); i++) {
            const elem = <span onClick={() => changePage(i - 1)}>{i}</span>;
            btns.push(elem);
          }

          return (
            <>
              <div>{btns}</div> // pagination buttons
              <div>{listItems}</div>
            </>
          );
        }

        export default ToDoList;