help_user/src/Main.tsx

import React from "react";
import {Navbar,Nav,Dropdown} from "react-bootstrap";
import {IndexMenu} from "./sub/IndexMenu";
import {Volunteer} from "./sub/Volunteer";
import {MyHelp} from "./sub/MyHelp";

/**
 * 菜单标记
 */
enum Menu {
    index,
    volunteer,
    myHelp
}

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

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

    //获取菜单名颜色
    getMenuColor(menu:Menu){
        if(this.state.menu===menu){
            return {
                color:"white",
                backgroundColor:"blue"
            }
        }else{
            return {
                color:"blue",
                backgroundColor: "white"
            }
        }
    }

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

        switch (menu) {
            case Menu.index:
                this.setState({
                    subMenu:<IndexMenu/>
                });break;
            case Menu.volunteer:
                this.setState({
                    subMenu:<Volunteer/>
                });break;
            case Menu.myHelp:
                this.setState({
                    subMenu:<MyHelp/>
                });break;

        }
    }

    render() {
        return (
            <div>
                <Navbar bg="light">
                    <Navbar.Brand>互联网+互助平台</Navbar.Brand>
                    <Nav variant="pills" defaultActiveKey="index" className="w-100">
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="index" style={this.getMenuColor(Menu.index)} onClick={()=>this.changeMenu(Menu.index)}>首页</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="volunteer" style={this.getMenuColor(Menu.volunteer)} onClick={()=>this.changeMenu(Menu.volunteer)}>志愿者</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="myHelp" style={this.getMenuColor(Menu.myHelp)} onClick={()=>this.changeMenu(Menu.myHelp)}>我的求助</Nav.Link>
                        </Nav.Item>

                        <Dropdown>
                            <Dropdown.Toggle variant="secondary" id="dropdown-basic">
                                {this.props.user}
                            </Dropdown.Toggle>

                            <Dropdown.Menu>
                                <Dropdown.Item>时间币</Dropdown.Item>
                                <Dropdown.Item >我的好友</Dropdown.Item>
                                <Dropdown.Item >我的留言</Dropdown.Item>
                                <Dropdown.Item>个人信息</Dropdown.Item>
                                <Dropdown.Item onClick={()=>this.props.logout()}>注销登录</Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>

                        <Navbar.Brand className="ml-3">等待接受帮助</Navbar.Brand>
                    </Nav>
                </Navbar>

                {this.state.subMenu}
            </div>
        );
    }
}