React实现后台管理系统（二）

一、页面tag实现

1、tag显示和兄弟组件传值

①tag显示效果实现

使用antd中的Tag组件实现，在components文件夹下新建tag/index.js以及index.css文件
tag/index.js：

import React, {
   
    useState } from 'react'
import {
   
    Tag, Space } from 'antd'
import './index.css'

const MyTag = props => {
   
   
  return (
    <Space className='tag-box' size={
   
   [0, 8]} wrap>
      <Tag>首页</Tag>
      <Tag closeIcon onClose={
   
   handleClose} color='#55acee'>
        Prevent Default
      </Tag>
    </Space>
  )
}
export default MyTag

tag/index.css：

.tag-box {
   
   
  padding-top: 24px;
  padding-left: 24px;
}

在layout中引入tag组件：

... ...
import MyTag from '../components/tag'
... ...

const MyLayout = () => {
   
   
  ... ...
  return (
    <Layout className='main-container'>
      ... ...
        <MyHeader collapsed={
   
   collapsed} Collapsed={
   
   Collapsed} setCollapsed={
   
   setCollapsed} />
        <MyTag></MyTag>
        <Content
          ... ...
        >
          <Outlet />
        </Content>
      ... ...
    </Layout>
  )
}

export default MyLayout

②使用redux实现兄弟组件传值

修改src/store/reducers/tab.js文件：

import {
   
    createSlice } from '@reduxjs/toolkit'

const tabSlice = createSlice({
   
   
  name: 'tab',
  initialState: {
   
   
    ... ...
    tagList: [
      {
   
   
        path: '/',
        name: 'home',
        label: '首页'
      }
    ]
  },
  reducers: {
   
   
    ... ...
    selectTagList: (state, {
    
     payload: val }) => {
   
   
      if (val.name !== 'home') {
   
   
        //如果已经存在的tag就不添加
        const res = state.tagList.findIndex(item => item.name === val.name)
        if (res === -1) {
   
   
          state.tagList.push(val)
        }
      }
    }
  }
})

export const {
   
    selectTagList } = tabSlice.actions
export default tabSlice.reducer

修改conponents/aside/index.js文件：

... ...
import {
   
    useDispatch } from 'react-redux'
import {
   
    selectTagList } from '../../store/reducers/tab'

... ...
const Aside = props => {
   
   
  ... ...
  const dispatch = useDispatch()

  //添加数据到store
  const setTagList = val => {
   
   
    dispatch(selectTagList(val))
  }

  ... ...

  const clickMenu = e => {
   
   
    let data
    menuList.forEach(item => {
   
   
      if (item.path === e.keyPath[e.keyPath.length - 1]) {
   
   
        data = item
        //如果有二级菜单
        if (e.keyPath.length > 1) {
   
   
          data = item.children.find(child => {
   
   
            return child.path === e.key
          })
        }
      }
    })
    setTagList({
   
   
      path: data.path,
      name: data.name,
      label: data.label
    })
    navigate(e.key)
  }
   ... ...
}
export default Aside

修改components/tag/index.js文件：

... ...
import {
   
    useNavigate } from 'react-router-dom'
import {
   
    useSelector } from 'react-redux'

const MyTag = props => {
   
   
  const tagList = useSelector(state => state.tab.tagList)
  const handleClose = () => {
   
   
    console.log(123, tagList)
  }
  ... ...
}
export default MyTag

2、tag选中和删除

①当前菜单存储

同样使用redux进行存储，修改src/store/reducers/tab.js文件：

... ...

const tabSlice = createSlice({
   
   
  name: 'tab',
  initialState: {
   
   
    ... ...
    currentMenu: {
   
   }
  },
  reducers: {
   
   
   ... ...
    selectTagList: (state, {
    
     payload: val }) => {
   
   
      if (val.name !== 'home') {
   
   
        state.currentMenu = val
        ... ...
      } else if(val.name !== 'home' && state.tagList.length === 1){
   
   
        state.currentMenu = {
   
   }
      }
    },
    setCurrentMenu: (state, {
    
     payload: val }) => {
   
   
      if (val.name === 'home') {
   
   
        state.currentMenu = {
   
   }
      } else {
   
   
        state.currentMenu = val
      }
    }
  }
})
... ...

②tag遍历显示

修改components/tag/index.js文件：

... ...
const MyTag = props => {
   
   
  const tagList = useSelector(state => state.tab.tagList)
  const currentMenu = useSelector(state => state.tab.currentMenu)
  const handleCloseTag = () => {
   
   
    console.log(123, tagList)
  }

  const handleClickTag = tag => {
   
   }

  //tag的显示,flag为是否选中标识
  const setTag = (flag, item, index) => {
   
   
    return flag ? (
      <Tag closeIcon onClose={
   
   () => handleCloseTag(item, index)} color='#55acee' key={
   
   item.name}>
        {
   
   item.label}
      </Tag>
    ) : (
      <Tag key={
   
   item.name} onClick={
   
   () => handleClickTag(item)}>
        {
   
   item.label}
      </Tag>
    )
  }
  return (
    <Space className='tag-box' size={
   
   [0, 8]} wrap>
      {
   
   currentMenu.name &&
        tagList.map((item, index) => setTag(item.path === currentMenu.path, item, index))}
    </Space>
  )
}
export default MyTag

③删除tag

修改src/store/reducers/tab.js文件：

import {
   
    createSlice } from '@reduxjs/toolkit'

const tabSlice = createSlice({
   
   
  ... ...
  reducers: {
   
   
    ... ...
    closeTag: (state, {
    
     payload: val }) => {
   
   
      let res = state.tagList.findIndex(item => item