help_user/src/my/MyMessage.tsx

import React from "react";
import {Button, ButtonGroup, Col, Container, Row} from "react-bootstrap";
import {MyInfo} from "./MyInfo";
import {MyHelp} from "./MyHelp";
import {SeekHelp} from "./SeekHelp";
import {Cookies} from "react-cookie";

enum Menu {
    info="个人信息",
    seekHelp="我的求助",
    help="我的帮助"
}

/**
 * 个人信息
 */
export class MyMessage extends React.Component<{
    user:string,
    cookies:Cookies,
    //刷新用户信息
    refreshFun?:Function
}, {
    subMenu:Menu,
    page:JSX.Element
}>{

    private defaultMenu=<MyInfo refreshFun={(value:any)=>this.props.refreshFun?this.props.refreshFun(value):null} cookies={this.props.cookies}  userId={this.props.user}  isOwn={true} isAdd={false}/>

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

        this.state={
            subMenu:Menu.info,
            page:this.defaultMenu
        }
    }

    //切换菜单
    changeMenu(menu:Menu){
        this.setState({subMenu:menu})
        switch (menu) {
            case Menu.info:
                this.setState({page:this.defaultMenu})
                break
            case Menu.help:
                this.setState({page:<MyHelp cookies={this.props.cookies} refreshFun={(value:any)=>this.props.refreshFun?this.props.refreshFun(value):null}/>})
                break
            case Menu.seekHelp:
                this.setState({page:<SeekHelp user={this.props.user}/>})
                break
        }
    }

    render() {
        return (
        <Container>
            <Row>
                <Col>
                    <ButtonGroup aria-label="Basic example">
                        {[Menu.info,Menu.seekHelp,Menu.help].map((menu:Menu,index:number)=><Button onClick={()=>this.changeMenu(menu)} key={"button"+index} variant={menu===this.state.subMenu?"primary":"light"}>{menu}</Button>)}
                    </ButtonGroup>
                </Col>
            </Row>
            <Row>
                {this.state.page}
            </Row>
        </Container>);
    }
}