react如何实现侧边栏联动头部导航栏效果
更新时间：2023年03月12日 14:23:17 作者：sky_blue6
这篇文章主要介绍了react如何实现侧边栏联动头部导航栏效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
项目中使用react+antd design+redux+react-reouter-dom
实现思路
编写路由表=》循环遍历路由表=》渲染侧边栏=》单击侧边栏获取相应的标签数据=》存入redux=》遍历循环redux数据渲染头部导航栏
路由表
const RouterTree = [
{
key: 'num_one',
title: {
icon: '',
text: 'text'
},
children: [
{
key: '1',
text: 'options1',
path: '/option1',
component: '',
isOutSide: true,
}
]
},
{
key: 'num_two',
title: {
icon: '',
text: 'text'
},
children: [
{
key: '2',
text: 'text',
path: '/option1',
component: '',
isOutSide: false
}
]
},
{
key: 'num_three',
title: {
icon: '',
text: 'text'
},
children: [
{
key: '3',
text: 'text',
path: '/option1',
component: '',
isOutSide: false
}
]
},
]
export default RouterTree侧边栏渲染
引入路由表，循环遍历渲染侧边栏
import React, { Component } from 'react'
import { Menu } from 'antd';
import { NavLink as Link, withRouter } from 'react-router-dom'
import RouterTree from '@/modules/route.js'
render() {
const { activityKey } = this.state || {}
return (
<div>
<Menu
onClick={this.handleClick}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
selectedKeys={activityKey}
mode="inline"
inlineCollapsed={isToggle}
>
{RouterTree.map((item, index) => {
return (
<SubMenu
key={item.key}
title={item.title.text}
index={index}
>
{item.children && item.children.map((menuItem, menuIndex) => {
return (<Menu.Item
key={menuItem.key}
index={menuIndex}
>
{menuItem.isOutSide ? <a href='http://www.baidu.com' rel="noopener noreferrer">baidu</a> : <Link to={menuItem.path}>{menuItem.text}</Link>}
</Menu.Item>)
})}
</SubMenu>)
})}
</Menu>
</div>
)由于单独使用redux不便，项目中引用react-redux，redux-thunk。
这里将侧边栏拆分为两个文件，一个是容器组件，一个为UI组件（以上的为UI组件）
容器组件（侧边栏）
容器组件为导出的组件，在容器组件中引入UI组件slide
import { connect } from 'react-redux'
import { business } from '@/tools/index.js'
import Slide from './slide'
const { processedArr } = business
const mapStoreToProps = (state) => {
const { dynamicJump,activityKey} = state || {}
let responseRoute = processedArr(dynamicJump)
return {
dynamicJump: [...responseRoute],
activityKey:activityKey
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateRouter(item) {
dispatch((dispatch) => {
dispatch({
type: 'UPDATED_ROUTING', item: { ...item }
})
})
},
activityKeys(key){
dispatch((dispatch)=>{
dispatch({
type:'ACTIVITY_KEY',key:key
})
})
}
}
}
export default connect(mapStoreToProps, mapDispatchToProps)(Slide)store
在src下新建一个store文件
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux'
let createHistory = require('history').createBrowserHistory
let history = createHistory()
let routerWare = routerMiddleware(history)
const dynamicJump = {
dynamicJump: '这里设置默认值'（一般存放在session中）,
activityKey: '这里设置默认值',
}
const reducers = function (state = dynamicJump, action) {
switch (action.type) {
case 'UPDATED_ROUTING':
state.dynamicJump =action.item
break;
case 'ACTIVITY_KEY':
if (action.key !== undefined) {
state.activityKey = action.key
}
break;
default:
break;
}
return { ...state }
}
const store = createStore(reducers, applyMiddleware(thunk, routerWare))
// 订阅事件
store.subscribe(() => {
let state = store.getState();
sessionStorage.setItem('dynamicJump',JSON.stringify(state.dynamicJump))
sessionStorage.setItem('activityKey',JSON.stringify(state.activityKey))
})
export default store在根目录下将其注入进去（注意文件的引入位置）
import {Provider} from 'react-redux'
import store from './store/index.js'
ReactDOM.render(
<Provider store={store}><App /></Provider>,
document.getElementById('root')
);头部导航栏
容器组件
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import { business } from '@/tools/index.js'
import Header from './head.jsx'
const { processedArr } = business
const mapStoreToProps = (state) => {
const { dynamicJump, activityKey } = state
let newRouteArr = processedArr(dynamicJump)
return {
dynamicJump: [...newRouteArr],
activityKey: activityKey
}
}
const mapDispatchToProps = (dispatch) => {
return {
removeKey(itemKey) {
dispatch((dispatch, getStore) => {
const { dynamicJump } = getStore() || {}
let removeArr = processedArr(dynamicJump)
const indexes = removeArr.findIndex((item) => item.key === itemKey)
// 点击头部导航条的删除（即删除保存在redux的数组元素即可）
if (removeArr.length > 1) {
removeArr.splice(indexes, 1)
}
// 删除之后跳转到删除元素的前一个元素的路由地址
let path = removeArr[indexes - 1] ? removeArr[indexes - 1].path : '/option1'
let keys = removeArr[indexes - 1] ? removeArr[indexes - 1].key : 0
if(keys===0){
keys=removeArr[0].key
}
dispatch({
type: 'UPDATED_ROUTING', item: { ...removeArr },
})
dispatch({
type: 'ACTIVITY_KEY', key: keys
})
// 这里进行跳转
dispatch(push(path))
})
},
changeActiveKey(key) {
dispatch((dispatch) => {
dispatch({
type: 'ACTIVITY_KEY', key: key
})
})
}
}
}
export default connect(mapStoreToProps, mapDispatchToProps)(Header)这里存在着：如果删除头部组件的其中一个导航，那么需要跳转到该导航（删除的）的前一个路由地址，而这个操作在UI组件中是不方便的，这里我采取的方法是引入“history”模块（详细代码请移步到store.js),然后在容器组件中使用dispatch(push(path))跳转，也可以使用更为简单的方法，直接在容器组件中引入react-router的withRouter，包裹在最外层即：export default withRouter（connect(mapStoreToProps, mapDispatchToProps)(Header)）
UI组件
render(){
const { dynamicJump } = this.props || {}
const { activeKey } = this.state || {}
<Tabs
hideAdd
onChange={this.onChange}
activeKey={activeKey}
type="line"
onEdit={this.onEdit}
className='tabs'
>
{ dynamicJump.map((item) => (
<TabPane tab={<Link to={item.path}>{item.text}</Link>} key={item.key} />
))}
</Tabs>
}对于key值，可以使用react新增的钩子函数：getDerivedStateFromProps进行判断是否更行
static getDerivedStateFromProps(nextProps, preState) {
const { activityKey, dynamicJump } = nextProps || {}
const { activeKey } = preState || {}
if (activityKey !== activeKey) {
return {
activeKey: activityKey
}
}
return { allRoute: dynamicJump }
}
remove = targetKey => {
this.removeKey(targetKey)
}
removeKey(key) {
this.props.removeKey(key)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React 函数式组件与类组件的主要区别在于它们的定义和声明方式以及它们之间的一些特性,所以本文就详细的给大家讲讲React中函数式组件与类组件有何不同,需要的朋友可以参考下2023-09-09
本篇文章主要介绍了关于react-router的几种配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
react的核心之一是组件，下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
react代码模式分为两种类组件和函数组件(生命周期也有所不同),这篇文章主要介绍了react生命周期(类组件/函数组件),需要的朋友可以参考下2023-01-01
这篇文章主要介绍了react-router-dom的使用说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了React文件分段上传实现方法，将文件切成多个小的文件；将切片并行上传；所有切片上传完成后，服务器端进行切片合成；当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分实现断点续传；当切片合成为完整的文件，通知客户端上传成功2022-11-11
这篇文章主要介绍了React项目中eslint使用百度风格,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下2022-07-07
最新评论