help_user/src/sub/IndexMenu.tsx

import React from "react";
import {Container,Row,Col,Card,ListGroup,Button} from "react-bootstrap";
import {ActiveProps} from "../entity";
import {Page} from "../Page";
/**
 * 首页
 */
export class IndexMenu extends React.Component<any, any>{



    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            activeList:[],
            page:{
                currentPage:1,
                totalPage:3,
                pageSize:9
            }
        }
    }

    componentDidMount() {
        this.loadActive(1)
    }

    loadActive(page:number){
        this.setState({
            activeList:[[{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            },{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            },{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            }],[{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            },{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            },{
                activeId: 123,
                //活动标题
                title: "活动标题",
                //活动内容
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                //活动图片
                activeImg: "/logo512.png"
            }]]
        })
    }


    render() {
        const rowList=this.state.activeList.map((actives:Array<ActiveProps>, index:number)=>
           <Row className="p-3" key={"row"+index}>{actives.map((active:ActiveProps, subIndex:number)=>
               <Col className="col-4" key={"col"+subIndex}>
                   <Card>
                       <Card.Header>
                        <img src={active.activeImg} alt="活动图片" className="activeImage"/>
                       </Card.Header>
                       <Card.Body>
                          <ListGroup>
                              <ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
                                  {active.title}
                              </ListGroup.Item>
                              <ListGroup.Item>
                                  <p>{active.content}</p>
                              </ListGroup.Item>
                          </ListGroup>
                       </Card.Body>
                       <Card.Footer>
                           <Button variant="primary" className="w-100">帮助</Button>
                       </Card.Footer>
                   </Card>
               </Col>)}
           </Row>
        )

        return (

            <Container className="p-5">
                <Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>


                    {rowList}


                <Page onClick={(page:number)=>this.loadActive(page)}  currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>

            </Container>
        )
    }
}