0
点赞
收藏
分享

微信扫一扫

React-左侧菜单栏的功能添加(借助Redux实现)

❤ React-左侧菜单栏的功能添加(借助Redux实现)

1、实现的效果

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

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

react-menusec.png

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=/>

弊端

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

2、 svg引入作为组件使用,仅仅可在CRA官方搭建的版本之中使用

注意:这里我们使用svg字体颜色来控制的时候,需要将svg的属性fill 设置为currentColor

React 16.3CRA官方版本结合craco配置 
可以使用import { ReactComponent as Icon } from 'path-to-your.svg'

以组件形式导入 SVG 文件
在业务代码中直接<Icon /> 就可以将 SVG 代码渲染到 DOM 上了
配合一些 CSS 就可以很方便的改变 SVG 图标的颜色、描边、背景色等样式了
//引入
import { ReactComponent as Menulisvg } from '@/assets/svg/menuli.svg'

//使用
<Menulisvg className=menulisvg></Menulisvg>


//样式
.menulisvg {
width: 30px;
height: 30px;
margin: 10px;
font-size: 16px;
color: #606060;
}

4、总结

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

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

相关推荐

0 条评论