React兄弟函数组件通讯——实现分页功能

res：

{
loading:flase,
data:[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}],
}

res.data.slice(0, 7)：[{…}, {…}, {…}, {…}, {…}, {…}, {…}]

res.data.slice(7, 14)：[{…}, {…}]

分页后 resAfterPaging：[Array(7), Array(2)]

即： [ [{…}, {…}, {…}, {…}, {…}, {…}, {…}], [{…}, {…}] ]

slice的用法！

FatherComponent/index.tsx

import React, { useState } from 'react';
import style from './index.module.css';
import Loading from 'renderer/component/Loading';
import Paging from 'renderer/component/Paging';

export interface PaymentProps {
  pageNum: number;
  passPageSum: (Num) => void;
}

const EachPageList: React.FC<PaymentProps> = (props) => {

  //分页
  function split_array(arr, len) {
    if (!arr.loading) {
      //总个数
      let a_len = arr.data.length;
      let result = [] as any;
      for (var i = 0; i < a_len; i += len) {
        result.push(arr.data.slice(i, i + len));
      }
      return result;
    }
  }

  // 1、每页分7个
  let resAfterPaging = split_array(res, 7);

  if (resAfterPaging && resAfterPaging.length) {
    // 2、将总页数传给父组件
    props.passPageSum(resAfterPaging.length);
  }

  if (res.loading) {
    Loading.loading();
  } else {
    Loading.destroy();
  }

  // 8、渲染第n页的数据
  return res.loading
    ? null
    : resAfterPaging[props.pageNum].map((value) => {
        return (
          <div
            className={style.deStyle}
            key={value.id}
          >
            <span className={`${style.deFontStyle} ${value.name.length > 5 ? style.fontStyle : ''}`}>
              {value.name}
            </span>
          </div>
        );
      });
};

const FatherComponent: React.FC<object> = () => {
  let [pageNum, setpageNum] = useState(0);
  let [pageSum, setpageSum] = useState(0);

  // 3、接收从组件EachPageList传来的总页数  pageSum
  function passPageSum(Num) {
    setpageSum(Num);
  }

  // 6、接收从组件Paging传来的第n页的n  pageNum
  function getPageNum(Num) {
    setpageNum(Num);
  }

  return (
    <div>
        {/* 4、父组件将pageSum传给Paging分页组件 */}
        <Paging pageSum={pageSum} getPageNum={getPageNum}/>
        {/* 7、父组件将当前该页的页数pageNum传给EachPageList渲染数据组件 */}
        <EachPageList pageNum={pageNum} passPageSum={passPageSum} />
    </div>
  );
};

export default FatherComponent;

Paging/index.tsx

import React, { useState } from 'react';

import style from './index.css';

export interface PagingProps {
  pageSum: number;
  getPageNum: (Num) => void;
}
const Paging: React.FC<PagingProps> = (props) => {
  let [pageNum, setpageNum] = useState(0);

  // 上一页
  async function btnUpClick() {
    if (pageNum == 0) {
      //没有上一页时，设置按钮无法点击
      pageNum = pageNum;
    } else {
      pageNum = pageNum - 1;
    }
    setpageNum(pageNum);
    // 5、将当前该页的页数pageNum传给父组件
    props.getPageNum(pageNum);
  }
  
  // 下一页
  async function btnDownClick() {
    if (pageNum == props.pageSum - 1) {
      //没有下一页时，设置按钮无法点击
      pageNum = pageNum;
    } else {
      pageNum = pageNum + 1;
    }
    setpageNum(pageNum);
    // 5、将当前该页的页数pageNum传给父组件
    props.getPageNum(pageNum);
  }

  return (
    <div className={style.pageCon}>
      <button
        className={`${style.btnUp} ${pageNum != 0 ? style.active : ''}`}
        onClick={() => btnUpClick()}
      >
        上一页
      </button>
      <div className={style.pageFont}>
        <span>
          {pageNum + 1}/{props.pageSum}
        </span>
      </div>
      <button
        className={`${style.btnDown} ${
          pageNum == props.pageSum - 1 ? style.unactive : ''
        }`}
        onClick={() => btnDownClick()}
      >
        下一页
      </button>
    </div>
  );
};

export default Paging;