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";
import {MyFriend} from "./my/MyFriend";
import {MyDialog} from "./my/MyDialog";
import {MyLeaveWord} from "./my/MyLeaveWord";
import {MyMessage} from "./my/MyMessage";
/**
 * 菜单标记
 */
enum Menu {
    index,
    volunteer,
    myHelp
}

/**
 * 我的弹框菜单列表
 */
enum DialogType {
    friend="我的好友",
    leaveWord="我的留言",
    message="个人信息"
}

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

    constructor(props: Readonly<any>) {
        super(props);
        //默认菜单
        this.state={
            //一级菜单
            menu:Menu.index,
            //二级菜单
            subMenu:<IndexMenu/>,
            //我的好友信息
            friendList:[],
            //我的菜单
            my:{menuName: "",content:null,open:false}
        }
    }


    //获取菜单名颜色
    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;

        }
    }

    /**
     * 关闭弹窗
     */
    closeDialog(){
        this.setState({my:{...this.state.my,...{menuName: "",content:null,open:false}}})

        console.debug(this.state.my)
    }

    /**
     * 打开弹窗
     */
    openDialog(dialogType:DialogType){
        switch (dialogType) {
            case DialogType.friend:
                this.setState({
                    my:{menuName:dialogType,content:<MyFriend user={this.props.user}/>,open:true}
                })
                break;
            case DialogType.leaveWord:
                this.setState({
                    my:{menuName:dialogType,content:<MyLeaveWord/>,open:true}
                })
                break;
            case DialogType.message:
                this.setState({
                    my:{menuName:dialogType,content:<MyMessage/>,open:true}
                })
                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>
                                {[DialogType.friend,DialogType.leaveWord,DialogType.message].map((type:DialogType,index:number)=><Dropdown.Item disabled={this.state.my.open} key={"dropdown"+index} onClick={()=>this.openDialog(type)}>{type}</Dropdown.Item>)}
                                <Dropdown.Item onClick={()=>this.props.logout()}>注销登录</Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>

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

                        <MyDialog menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
                    </Nav>
                </Navbar>

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