关于react+ant-design分页操作

写在前面：这里用到的分页UI组件是ant-design的Pagination，还有一些ant-design的其他组件。
我分了contentMenu.jsx\pageinationItem.jsx\contentword.jsx三个文件写分页操作

• contentMenu.jsx:
  1.使用componentWillMount请求第一次加载的数据
  2.引入pageinationItem.jsx/contentword.jsx搭建的组件作为它的子组件。
  3.每次获取pageinationItem.jsx返回的当前页码，并请求该页的分页数据，传递给contentword.jsx进行渲染。
• pageinationItem.jsx：
  1.放置分页组件(ant-design的Pagination)
  2.传onClick事件的值（第几页：key）给父组件，让父组件进行该页数据的请求。
• contentword.jsx：
  1.接收contentMenu.jsx请求到的分页数据
  2.用map函数将获取的分页数据pageItem填充到Panel上进行渲染
  3.返回给父组件contentMenu.jsx

下面贴完整代码
contentMenu

/*
 * @Author: your name
 * @Date: 2020-03-15 14:53:15
 * @LastEditTime: 2020-07-14 11:08:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath:
 */ 

import React, { Component } from "react";
import { Tabs, message } from "antd";
import { reqPageItems } from "../../api/index.js";
import "./contentMenu.less";
import ContentWord from "./contentWord.jsx";
import Detail from "./detail.jsx";
import PageinationItem from "./pageinationItem.jsx";

const { TabPane } = Tabs;

export default class contentMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //当前是那一页
      current: 1,
      key: 1,
      //请求到的data数据
      pageItem: [], 
      //一页有几条数据
      defaultPageSize: 2, 
      //一共有多少条数据
      total: 0, 
      //一共有几页
      pages: 0, 
      //是否加载完成
      isItemLoaded: false
    };
  }

  /**
   * @description: 处理子组件传递的值
   * @param {result = key:2 想要跳转到哪一页} 
   * @return: 
   */
  getPageResultArray = result => {
    result = result.key;
    this.setState(
      () => {
        return { current: result };
      },
      () => {
        const { current, defaultPageSize } = this.state;
        reqPageItems(current, defaultPageSize)
          .then(response => {
            if (response.isSuccess) {
              //存储该页文本
              this.setState({
                pageItem: response.data.experimentsData.records
              });
              //存储一共有多少数据
              this.setState({ total: response.data.experimentsData.total });
              //存储一共有多少页
              this.setState({ pages: response.data.experimentsData.pages });
            } else {
              message.error(response.message);
            }
          })
          .catch(error => {
            console.log("failed", error);
            message.error(error.message);
          });
      }
    );
  };

  /**
   * @description: 预先请求第一页的数据的函数
   * @param {} 
   * @return: 
   */  
  getPersonalFormPages = () => {
    this.setState(
      () => {
        return {
          //默认当前页为1 一页只有两条数据 
          current: 1,
          defaultPageSize: 3
        };
      },
      () => {
        const { current, defaultPageSize } = this.state;
        reqPageItems(current, defaultPageSize)
          .then(response => {
            if (response.isSuccess) {
              // 存储该页文本
              this.setState({
                pageItem: response.data.experimentsData.records
              });
              // 存储总共有多少页
              this.setState({ pages: response.data.experimentsData.pages });
              // 存储总共有多少数据
              this.setState({ total: response.data.experimentsData.total });
              // 设置加载完成为true
              this.setState({ isItemLoaded: true });
            } else {
              message.error(response.message);
            }
          })
          .catch(error => {
            console.log("failed", error);
            message.error(error.message);
          });
      }
    );
  };

  /**
   * @description: 渲染前的准备，预先请求第一页的数据
   * @param {} 
   * @return: 调用 getPersonalFormPages 函数
   */
  componentWillMount() {
    this.getPersonalFormPages();
  }

  render() {
    if (this.state.isItemLoaded) {
      const { defaultPageSize, total, pages } = this.state;
      return (
        <div>
          <Tabs
            defaultActiveKey="1"
            id="contentMainMenu"
          >
            <TabPane tab="实验" key="1" id="firstMenuItem">
              <ContentWord pageItem={this.state.pageItem} />
              {this.state.key === 1 ? (
                <PageinationItem
                  defaultCurrent={1}
                  defaultPageSize={defaultPageSize}
                  current={this.state.current}
                  total={total}
                  pages={pages}
                  getPageResultArray={this.getPageResultArray}
                />
              ) : (
                ""
              )}
            </TabPane>
            <TabPane tab="详情" key="2" id="secondMenuItem">
              <Detail />
            </TabPane>
          </Tabs>
        </div>
      );
    } else {
      return <div></div>;
    }
  }
}

pageinationItem.jsx

/*
 * @Author: your name
 * @Date: 2020-07-08 08:47:41
 * @LastEditTime: 2020-07-14 13:52:50
 * @LastEditors: Please set LastEditors
 * @Description: 放置分页组件，并传点击事件的值（key）给父组件
 * @FilePath: 
 */ 
import React from "react";
import { Pagination } from "antd";

export default class PageinationItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0, //当前页码,
      total: 1, //总共多少数据
      size: 2, //一页多少调数据
      pageItem: []//后端返回的数据
    };
  }

  render() {
    const { defaultCurrent, current, total, defaultPageSize } = this.props;
    return (
      <div>
        <Pagination
          defaultCurrent={defaultCurrent}
          current={current}
          total={total}
          pageSize={defaultPageSize}
          onChange={key => this.props.getPageResultArray({ key })}
        />
      </div>
    );
  }
}

contentWord.jsx

/*
 * @Author: your name
 * @Date: 2020-03-15 15:36:41
 * @LastEditTime: 2020-07-14 14:18:06
 * @LastEditors: Please set LastEditors
 * @Description: 用map函数将分页内容填充在Panel上
 * @FilePath: 
 */ 
import React, { Component } from "react";
import { Collapse, Button, message } from "antd";

import "./contentWord.less";
import startLogo from "./img/start.svg";
import { reqExpAccess } from "../../api/index.js";
import memoryUtils from "../../utils/memoryUtils.js";

const { Panel } = Collapse;

export default class ContentWord extends Component {
  constructor(props) {
    //props中放置了当前分页中的内容pageItems
    super(props);
    this.state = {
      //当前登录用户的信息
      user: "",
      //实验ID
      expId: "",
    };
  }

  /**
   * @description: 预加载，从内存中读取user并存储在状态中
   * @param {type} 
   * @return: 
   */
  componentWillMount() {
    const user = memoryUtils.user;
    this.setState({ user: user });
  }

  /**
   * @description:进入实验函数 
   * @param {e:点击事件event,index:顺序标} 
   * @return: 
   */
  goExperience = (e, index) => {
    this.setState(
      () => {
        return { expId: index };
      },
      () => {
        const { expId, user } = this.state;
        reqExpAccess(user.userId, expId)
          .then(response => {
            console.log("response.data", response.data);
            window.location.href = "/#/experience";
          })
          .catch(error => {
            console.log("failed", error);
            message.error(error.message);
          });
      }
    );
  };

  /**
   * @description: 调用map函数将分页内容填充在Panel上并返回
   * @param {type} 
   * @return: 
   */
  render() {
    const list = this.props.pageItem;
    return (
      <div id="contentWordSpace">
        <Collapse accordion defaultActiveKey={["0"]}>
          {list.map((item, index) => (
            <Panel
              header={item.experimentTitle}
              key={item.experimentId}
            >
              <p>{item.experimentDescribe}</p>
              <div className="contentWordStart">
                <img src={startLogo} alt="failed" />
                <Button
                  type="primary"
                  shape="round"
                  onClick={event => {
                    this.goExperience(event, index);
                  }}
                >
                  进入实验
                </Button>
              </div>
            </Panel>
          ))}
        </Collapse>
      </div>
    );
  }
}