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 (
    
      {/* 左边侧边栏 */}
       setCollapsed(value)}>
        

        
      
      {/* 右边内容 */}
      
        {/* 右边头部 */}
        

          {/* 面包屑 */}
          
            User
            Bill
          
        
        {/* 右边内容 */}
        
          {/* 窗口部分 */}
          
        
        {/* 右边底部 */}
        
Ant Design ©2023 Created by Ant UED
      
    
  );
};

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['items'][number];

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

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 (
    
  )
  
}

export default Comp;