help_admin/src/Main.tsx

import React from "react";
import {Navbar,Nav,Button} from "react-bootstrap";
import {Manager} from "./Manager";
import {User} from "./User";
import {Active} from "./Active";

/**
 * 菜单标记
 */
enum Menu {
    manager,
    user,
    active
}

/**
 * 主菜单
 */
export class Main extends React.Component<any, any>{

    constructor(props: Readonly<any>) {
        super(props);
        //默认菜单
        this.state={
            menu:Menu.manager,
            subMenu:<Manager/>
        }
    }

    //获取菜单名颜色
    getMenuColor(menu:Menu){
        return this.state.menu===menu?"black":"blue"
    }

    //切换菜单
    changeMenu(menu:Menu){
        this.setState({
            menu:menu
        })

        switch (menu) {
            case Menu.manager:
                this.setState({
                    subMenu:<Manager/>
                });break;
            case Menu.user:
                this.setState({
                    subMenu:<User/>
                });break;
            case Menu.active:
                this.setState({
                    subMenu:<Active/>
                });break;
        }
    }

    render() {

        return (
            <div>
                <Navbar bg="light">
                    <Nav className="mr-auto">
                        <Nav.Link style={{color:this.getMenuColor(Menu.manager)}} onClick={()=>this.changeMenu(Menu.manager)}>管理员管理</Nav.Link>
                        <Nav.Link style={{color:this.getMenuColor(Menu.user)}} onClick={()=>this.changeMenu(Menu.user)}>用户管理</Nav.Link>
                        <Nav.Link style={{color:this.getMenuColor(Menu.active)}} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
                    </Nav>
                    <Navbar.Text>
                        欢迎管理员{this.props.manager}登录
                    </Navbar.Text>

                    <Button variant="outline-primary" className="ml-3" onClick={()=>this.props.logout()}>注销登录</Button>
                </Navbar>
                {this.state.subMenu}
            </div>

        )
    }
}