React 高级使用

目录

菜单栏组件抽取

---

 

菜单栏组件抽取

Home.tsx

import React, { useState } from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import {Outlet,useNavigate} from 'react-router-dom'
import MainMenu from '@/components/MainMenu'

const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
//  const navigateTo = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
        <MainMenu></MainMenu>
      </Sider>
      {/* 右边内容 */}
      <Layout className="site-layout">
        {/* 右边头部 */}
        <Header style={{ paddingLeft: '16px', background: colorBgContainer }} >
          {/* 面包屑 */}
          <Breadcrumb style={{ lineHeight: '64px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        {/* 右边内容 */}
        <Content style={{ margin: '16px 16px 0',background: colorBgContainer }}>
          {/* 窗口部分 */}
          <Outlet />
        </Content>
        {/* 右边底部 */}
        <Footer style={{ textAlign: 'center',padding:0,lineHeight:'48px' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default View;

MainMenu/index.tsx

// 菜单组件抽取
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Menu, theme } from 'antd';
import {Outlet,useNavigate,useLocation,useToken} from 'react-router-dom'



type MenuItem = Required<MenuProps>['items'][number];

// 菜单数据调整
const items: MenuItem[] = [
  {
    label: '栏目 1',
    key: '/page1',
    icon: <PieChartOutlined />,
  },
  {
    label: '栏目 2',
    key: '/page2',
    icon: <DesktopOutlined />,
  },
  {
    label: '栏目 3',
    key: '/page3',
    icon: <UserOutlined />,
    children:[
      {
        label: '栏目 301',
        key: '/page3/page301',
      },
      {
        label: '栏目 302',
        key: '/page3/page302',
      },
      {
        label: '栏目 303',
        key: '/page3/page303',
      },
    ]
  },
  {
    label: '栏目 4',
    key: '/page4',
    icon: <UserOutlined />,
    children:[
      {
        label: '栏目 401',
        key: '/page4/page401',
      },
      {
        label: '栏目 402',
        key: '/page4/page402',
      },
      {
        label: '栏目 404',
        key: '/page4/page404',
      },
    ]
  },
  {
    label: '栏目 5',
    key: '/page5',
    icon: <FileOutlined />,
  },
]

const Comp: React.FC = () => {
  const navigateTo = useNavigate()
 const currentRoute = useLocation()
 console.log("-------",currentRoute);
 
  const {token: { colorBgContainer }} = theme.useToken();

  const menuClick = (e:{key:string})=>{
    // 点击跳转到对应路由，编程式导航跳转，hook
    navigateTo(e.key)
  }
  let firstOpenKey:string = ''

  items.map((items,index)=>{
    console.log(items.key,index,currentRoute.pathname);
    const retrieval = currentRoute.pathname.includes(items.key)
    if(currentRoute.pathname.includes(items.key) === true){
      firstOpenKey = items.key
    }
    console.log(retrieval);
    
    
  })
  // 设置展开项初始值
  const [openKeys,setOpenKeys] = useState([firstOpenKey])
  const handleOpenChange = (openKeys: string[])=>{
    // 展开回收操作
    setOpenKeys([openKeys[openKeys.length-1]])
    console.log(openKeys);
  }
  return (
    <Menu 
      theme="dark" 
      defaultSelectedKeys={[currentRoute.pathname]} 
      mode="inline" items={items} 
      onClick={menuClick} 
      // SubMenu 展开/关闭的回调
      onOpenChange={handleOpenChange}
      // 当前展开的 SubMenu 菜单项 key 数组
      openKeys={openKeys}
    />
  )
  
}

export default Comp;