添加分页组件

src/Page.tsx

@@ -0,0 +1,21 @@
+import {PageForm} from "./entity";
+import React from "react";
+import {Pagination} from "react-bootstrap";
+
+/**
+ * 分页组件
+ */
+export class Page extends React.Component<PageForm, PageForm>{
+
+    render() {
+        return (
+            <Pagination className="justify-content-center">
+                {this.props.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
+                {this.props.currentPage>1?<Pagination.Prev/>:<Pagination.Prev disabled/>}
+                <Pagination.Item active>{this.props.currentPage}</Pagination.Item>
+                {this.props.currentPage<this.props.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
+                {this.props.currentPage===this.props.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
+            </Pagination>
+        );
+    }
+}

src/entity.ts

@@ -11,3 +11,15 @@ export interface ActiveForm {
     //活动图片
     activeImg:string;
 }
+
+/**
+ * 分页信息
+ */
+export interface PageForm {
+    //当前页
+    currentPage:number;
+    //总页数
+    totalPage:number;
+    //分页大小
+    pageSize:number;
+}

src/sub/IndexMenu.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import {Container,Row,Col,Card,ListGroup,Button,Pagination} from "react-bootstrap";
+import {Container,Row,Col,Card,ListGroup,Button} from "react-bootstrap";
 import {ActiveForm} from "../entity";
+import {Page} from "../Page";
 /**
  * 首页
  */
@@ -15,7 +16,8 @@ export class IndexMenu extends React.Component<any, any>{
             activeList:[],
             page:{
                 currentPage:1,
-                totalPage:1
+                totalPage:3,
+                pageSize:9
             }
         }
     }
@@ -106,26 +108,16 @@ export class IndexMenu extends React.Component<any, any>{
         )
 
         return (
+
             <Container className="p-5">
-                <Pagination className="justify-content-center">
+                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
-                    {this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
-                    {this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
-                    <Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
-                    {this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
-                    {this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
-                </Pagination>
 
                 <div>
                     {rowList}
                 </div>
 
-                <Pagination className="justify-content-center">
+                <Page  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>
-                    {this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
+
-                    {this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
-                    <Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
-                    {this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
-                    {this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
-                </Pagination>
             </Container>
         )
     }