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";

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

/**
 * 个人信息
 */
export class MyMessage extends React.Component<any, any>{


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

        this.state={
            subMenu:Menu.info,
            page:<MyInfo/>
        }
    }

    //切换菜单
    changeMenu(menu:Menu){
        this.setState({subMenu:menu})
        switch (menu) {
            case Menu.info:
                this.setState({page:<MyInfo/>})
                break
            case Menu.help:
                this.setState({page:<MyHelp/>})
                break
            case Menu.seekHelp:
                this.setState({page:<SeekHelp/>})
                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>);
    }
}