脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react侧边栏联动头部导航栏效果

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中的Context应用场景分析

    React中的Context应用场景分析

    这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式，而不必显式地通过组件树的逐层传递 props，通过实例代码给大家介绍使用步骤，感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • React Fragment介绍与使用详解

    React Fragment介绍与使用详解

    本文主要介绍了React Fragment介绍与使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 解决React报错Parameter 'props' implicitly has an 'any' type

    解决React报错Parameter 'props' implicitly&nb

    这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    详解Webpack+Babel+React开发环境的搭建的方法步骤

    本篇文章主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • React组件化学习入门教程讲解

    React组件化学习入门教程讲解

    React是现在前端使用频率最高的三大框架之一，React率先提出虚拟DOM的思想和实现，使其保持有良好的性能。本篇文章将对React组件化的入门学习进行讲解，同时针对模块化的思想进行概述，为接下来组件化开发的文章进行知识储备
    2022-09-09
  • React学习之事件绑定的几种方法对比

    React学习之事件绑定的几种方法对比

    这篇文章主要给大家介绍了关于React学习之事件绑定的几种方法对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • React中条件渲染的常见方法总结

    React中条件渲染的常见方法总结

    条件渲染在React开发中非常重要的功能,它允许开发人员根据条件控制渲染的内容,在创建动态和交互式用户界面方面发挥着至关重要的作用,本文总结了常用的的条件渲染方法,需要的朋友可以参考下
    2024-01-01
  • react express实现webssh demo解析

    react express实现webssh demo解析

    这篇文章主要为大家介绍了详解react express实现webssh demo解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 详解在React中跨组件分发状态的三种方法

    详解在React中跨组件分发状态的三种方法

    这篇文章主要介绍了详解在React中跨组件分发状态的三种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • react封装Dialog弹框的方法

    react封装Dialog弹框的方法

    这篇文章主要为大家详细介绍了react封装Dialog弹框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论