后台管理项目-前端-菜单栏联动头部导航栏

react+hooks+TS构建菜单栏联动头部导航栏

编写一个共享变量的组件（commonMenu)，分别编写菜单栏组件（Menu）、头部导航栏组件（Tabs）

commonMenu组件

import React, {createContext,useReducer} from 'react'

interface IAction {
	type:string,
	value:any
}

export interface IStore{
	state:{
		menu:any
	},
	dispatch?:React.Dispatch<IAction>
}

// 创建共享
export const MenuCreateContext=createContext<IStore>({
	state:{
		menu:[]
	}
})

export const CHANGE_MENUS="CHANGE_MENUS"

// 改变状态
const reducer=(state:any,action:any)=>{
	switch(action.type){
		case CHANGE_MENU:
			// 处理数组等操作;
			break;
		default:
			break;
	}
}

export function CommonMenu(props:any){
	const [state, dispatch]=useReducer(reducer,{menu:[]})
	return(
		<MenuCreateContext.Provider value={{state,dispatch}}>
			{props.children}
		</MenuCreateContext.Provider>
	)
}

将组件在父页面中引入，并且包裹菜单栏组件和头部组件

Menu 组件

import React, { useState, useContext } from 'react'
import {Menu} from 'antd'
import { MenuCreateContext,IStore } from '@/components/Context/CommonMenu'

const {SubMenu}=Menu

function SlideMenu(){
	const store:IStore=useContext(MenuCteateContext)
	const [data,setOpenKey]=useState<any>({
		openKeys:['sub1']
	})
	const rootSubmenuKeys:string[]=['sub1','sub2'.'sub3']
	
	const onOpenChange=（openKey:any）=>{
		let lastestOpenkey:any=openKeys.find((key:any)=>data.openKeys.indexOf(key)===-1)
		if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys({ openKeys });
        } else {
            setOpenKeys({ openKeys: latestOpenKey ? [latestOpenKey] : [] })
        }
	}
	// 添加事件
	const addMenu=()=>{
        store.dispatch!({
            type:'CHANGE_MENUS',
            value:['options1']
        })
    }
return (
        <Menu
            mode="inline"
            openKeys={data.openKeys}
            onOpenChange={onOpenChange}
            style={{ width: 256, height: '100%' }}
        >
            <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                <Menu.Item key="1" onClick={addMenu}>Option 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
                <Menu.Item key="3">Option 3</Menu.Item>
                <Menu.Item key="4">Option 4</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                <Menu.Item key="5">Option 5</Menu.Item>
                <Menu.Item key="6">Option 6</Menu.Item>
            </SubMenu>
            <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
                <Menu.Item key="9">Option 9</Menu.Item>
                <Menu.Item key="10">Option 10</Menu.Item>
                <Menu.Item key="11">Option 11</Menu.Item>
                <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
        </Menu>
    )
}

export default SlideMenu

通过在menu组件引入公共组件，并通过dispatch方法将数据提交到公共组件内，来修改公共数据，头部组件引入公共组件，即可实现组件通信。