❤React体系15-左侧菜单栏的功能添加（借助Redux实现）

❤ React体系15-左侧菜单栏的功能添加（借助Redux实现）

1、实现的效果

先看看我们最终要实现的效果：

点击左侧菜单栏隐藏的时候，菜单进行隐藏，这个时候显示的就是菜单的缩略形式 点击左侧菜单栏显示的时候，菜单显示，这个时候显示的就是菜单的展开形式

2、结构样式编写

我们先来写一下结构

大致就是一个左侧200px，一个右侧calc(100% - 200px)计算宽度，当然，这里我直接采用的padding-left,没啥原因，想咋写咋写。

然后拉进来两个图标，点击的时候进行显示和展开

//左侧 
<aside className={menuState ? 'nav-left collapsetrue' : 'nav-left collapsefalse'}>
            <Navbarleft></Navbarleft>
</aside>

//右侧 
<main className={menuState ? 'nav-right nav-right-collapsetrue' : 'nav-right nav-right-collapsefalse'}>
            <header className="nav-right-head">
                {menuState?(<img  onClick={()=>{handleClickcollapsesvg(false)}} className="collapsesvg" src={collapsefalsesvg} alt="" />):(<img  onClick={()=>{handleClickcollapsesvg(true)}} className="collapsesvg" src={collapsetruesvg} alt="" />)}
            </header>
            <main className="nav-right-body">
                <section className="nexusbcbox">
                    {/* 二级路由出口 */}
                    <Outlet></Outlet>
                </section>
            </main>
            <footer className="nav-right-foot"></footer>        
 </main>
 
 //样式部分
 
/* 菜单布局部分-后台admin */
.adminpage{
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.nav-left{
  width: 0;
  float: left;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  background-color: #fff;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  -webkit-box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
}

.nav-left .nav-logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  width: 100%;
  background-color: #908f8f;
}
.nav-right{
  width: 100%;
  float: left;
  height: 100vh;
  padding-left:200px;
  position: fixed;
}

.nav-right-head,.nav-right-foot{
  width: 100%;
  height: 60px;
  background: #e6e6e6;
  display: flex;
}
.nav-right-body{
  width: 100% - 200px;
  height: calc(100% - 120px);
  padding: 10px;
  left: 200px;
}


/* 左侧菜单样式 */
/* styles.css */
.sidebar {
  width: 100%;
  height: calc(100% - 120px);
  /* background-color: #333; */
  color: #fff;
}

.sidebar-header,.sidebar-footer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: cadetblue;
  opacity: 0.2;
}
.sidebar-body{
  height: calc(100% - 120px);
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  /* text-align: center; */
}
.sidebar-body .sidebarmenuli {
  width: 100%;
  line-height: 50px;
  cursor: pointer;
  transition: background-color 0.3s;
  padding: 0px 20px;
  display: block;
}

.sidebar-body .sidebarmenuli:hover {
  background-color: #555;
  color: #fff;
}

.sidebar-body .sidebarmenuliact {
  background-color: #908f8f;
  background-color: #1890FF;
  color: #fff;
}

/* 菜单展开收起 */
.collapsetrue{
  width:200px;
}
.collapsefalse{
  width:60px;
}
.nav-right-collapsefalse{
  padding-left:60px;
}
.collapsesvg{
  width: 40px;
  height: 40px;
  margin: 10px;
}

3、Redux的使用实现功能

函数组件之中部分

样式部分思路： 左侧一个动态类名collapsetrue和collapsefalse，三元直接判定 右侧一个动态类名nav-right-collapsetrue和nav-right-collapsefalse，三元直接判定

//左侧
className={menuState ? 'nav-left collapsetrue' : 'nav-left collapsefalse'}

//右侧
className={menuState ? 'nav-right nav-right-collapsetrue' : 'nav-right nav-right-collapsefalse'}

直接放上去我们的样式部分，接下来最重要的是我们对于Redux的使用，先引入我们之前写的菜单动作函数和状态的获取和改变函数

// 使用redux store
import { useSelector, useDispatch} from 'react-redux';
import { menuAction} from '@/store/actions';



//定义我们获取状态和改变状态的地方
// 状态仓库
const dispatch = useDispatch();
const menuState = useSelector((state:any) => state.menuReducer.menuVisible);


//点击事件
const handleClickcollapsesvg=(type)=>{
        console.log('是否展示菜单',type);
        console.log(menuState,'someState--获取');
}

回头看看我们menuReducer.js

// reducers/menuReducer.js
 
// reducers/menuReducer.js
import { MENU_ACTION } from '@store/actions/index';
const initialState = { menuVisible: true }; // 初始状态为显示
export function menuReducer(state = initialState, action) {
  switch (action.type) {
    case MENU_ACTION:
      return { ...state, 
        menuVisible: action.payload 
      };
    default:
      return state;
  }
}
export default menuReducer;
 

回头看看我们写的 menuAction

menuAction位于src/store/actions/index.js

export const MENU_ACTION = 'TOGGLE_MENU';
export const menuAction=(payload)=> {
  console.log('menuAction', payload);
  return { type: MENU_ACTION, payload };
}

React项目中使用svg图标（篇外）

这里我们使用到了svg，看一下我们如何在React之中使用svg

1、 当作图片使用

导入
import x from 'label.svg'

使用
<img src={x} alt=""/>

弊端

• 无法更换图片的颜色
• 后期扩展性和延伸性差

4、总结

可以看出，其实我们整个实现的过程之中都是useSelector拿到状态库的参数，然后通过过dispatch进行改变，而我们拿到仓库状态的这个过程之中的代码state.menuReducer.menuVisible 之中menuReducer是我们自己建立的那个存储库，后面的menuVisible也是我们自定义的状态，刚刚开始写的伙伴，一定得注意这个，这里是可以任意命名的。

const menuState = useSelector((state:any) => state.menuReducer.menuVisible);