react的antd左侧菜单及刷新选中状态

最新推荐文章于 2024-08-05 23:30:12 发布
最新推荐文章于 2024-08-05 23:30:12 发布
阅读量1w 收藏 9
点赞数 1
分类专栏： react 文章标签： react antd antd左侧菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youlinaixu/article/details/92085600
版权
本文详细介绍了如何在React应用中使用Ant Design库创建左侧菜单，并在页面刷新后保持菜单选中状态。通过利用React的状态管理和Antd的Menu组件特性，实现动态设置菜单高亮。
摘要由CSDN通过智能技术生成 
数据格式
[
    {
        "title": "首页",
        "icon": "home",
        "path": "/home"
    },
    {
        "title": "商品",
        "icon": "home",
        "path": "/catalogProduct",
        "children": [
            {
                "title": "品类管理",
                "icon": "home",
                "path": "/catalog"
            },
            {
                "title": "商品管理",
                "icon": "home",
                "path": "/product"
            }
        ]
    },
    {
        "title": "用户管理",
        "icon": "user",
        "path": "/user"
    },
    {
        "title": "角色管理",
        "icon": "role",
        "path": "/role"
    },
    {
        "title": "图形图标",
最低0.47元/天 解锁文章
youlinaixu
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd表格添加数据不更新_antd表格重新刷新选中项(清除选中缓存)
weixin_29095587的博客
12-23 3722
不加rowkey对比1.jpg如上如所示，选中项再打开页面仍然存在从antd官网复制的下面方法，点击其他按钮刷新selectedRowKeys发现清除不了选中项的缓存注意：不是点击第二页重复勾选的问题，是再次打开页面后有缓存的问题，重复勾选的问题我的下一篇文章会有介绍错误代码如下：const rowSelection = {onChange: (selectedRowKeys) => {th...
react+antd导航菜单，刷新后选中状态
Anything2207294253的博客
07-15 3961
import { withRouter } from 'react-router-dom'; export default withRouter(LayerSider); <Menu selectedKeys={[this.props.history.location.pathname]}> </Menu> withRouter的作用：把不是通过路由切换...
React后台系统左侧菜单及刷新选中状态
weixin_40545119的博客
07-30 1276
// menuConfig.js 用来配置左侧菜单栏 import { AppstoreOutlined, MenuUnfoldOutlined, MenuFoldOutlined, PieChartOutlined, DesktopOutlined, ContainerOutlined, MailOutlined, } from '@ant-design/icons'; const menuList = [ { title: '首页', key: '/h.
Ant Design（antd）基础入门
最新发布
www_tlj的专栏
08-05 1020
Ant Design 是由阿里巴巴旗下蚂蚁金服团队开发的企业级 UI 设计语言和 React 实现的组件库。它致力于提高企业级中后台产品的用户体验，并提供统一、简洁、易用的设计和开发规范。以上是如何在 React 项目中安装和配置 Ant Design 的详细步骤。通过使用创建项目，安装 Ant Design 包，并在项目中引入其样式文件和组件，你可以快速在项目中使用 Ant Design 提供的丰富组件库，提升开发效率和用户体验。
在React中使用antd的Menu菜单 刷新后自动检索选中的菜单
HuangGuanShanYai的博客
09-28 2100
react 中使用antd 的Menu菜单，自动获取地址栏的地址
React 中使用antd，刷新时被选中的menu初始化的问题
qq_36262295的博客
02-04 2453
在react项目中使用antd进行集成的时候，用到了menu做导航栏菜单项。 根据用户的操作习惯，选中一个菜单节点的时候，刷新页面的时候应该保持用户之前的选中状态。 今天恰巧碰到了这个问题，于是尝试了解决方案。 查看了一下antd中menu的API，定义如下 openKeys 当前展开的 SubMenu 菜单项 key 数组 string[] selectedKeys 当前选中的菜单项 key 数组 string[] 用到的就是这两个属性值，我们可以在menu中引用他，然后在state中进行配置 cons
antd + react 实现左侧菜单层级状态下展开并选中 且与面包屑导航保持一致
jsyxiaoba的博客
07-02 1327
不牵涉权限问题，只说数据层面的，即以当前的返回数据作为源数据进行处理 先说左侧菜单 这里说的左侧菜单层级显示只有两层，但是页面的层级可能有三级甚至四级的情况，当三级或者更多层级页面被渲染的时候，左侧菜单只选中二级菜单。下面看例子 // 左侧菜单要求显示成这样的层级： 数据管理 |————订单管理 很明显，菜单只有两级 ，当出现上面的情况时，三级及以上的层级页面必定都是二级菜单的子页面，且都是层层嵌套的页面。如果这里理解了，那就该说说路由的问题了。 为什么提到路由呢？ 因为菜单的展开选中都要与
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
react 后台管理项目中 结合antd (v4.0) 动态生成左侧菜单栏
m0_45382009的博客
03-12 3471
一级路由： /login /admin 下面配置admin的二级路由 1.准备好数据 假设从后台得到的数据结构（根据不同角色返回的不同菜单数据） const menuList = [ { title: '首页', icon: '<HomeOutlined />', key: '/index', }, { title: '商品', icon: '<ShopOutlined />',
React+AntD组件搭建后台管理系统（不定时更新）
weixin_48390287的博客
03-11 2320
项目描述 该项目是属于一个前后台分离的后台管理的SPA，即单页Web应用（single page web application，SPA），包含了用户管理、商品分类管理、商品管理以及权限管理等功能模块，在技术方面采用的是React的相关知识、AntD组件以及Github第三方库进行模块化、工程化的模式开发。 总的来说，这个后台管理系统实现的是增删改查的基本操作，但是对于像我这种前端小白来说还是收获匪浅，起码是对于一个项目的开发流程有所了解，现在根据每个组件记录一下学习历程，知识点的总结以及踩过的坑。 提前声
计算面包屑显示和解决 Antd 中 Menu 菜单高亮样式丢失问题
weixin_49436239的博客
09-25 1464
ant-design 的 Menu 自带菜单高亮样式。但是，当我们刷新页面时，Menu的高亮样式和伸缩状态会重置。如何解决这个问题呢？
react使用antd4来map循环渲染menu.item中icon
个人博客
03-24 2904
学习自 https://blog.csdn.net/qq_41522343/article/details/112863231 antd4中<Menu.Item icon={}>icon属性跟antd3中不一样，是节点属性，可以使用React.createElement方法来创建节点。 首先导入 import * as Icon from “@ant-design/icons”; 然后有了三种思路 geticon = (iconname) =>{ return React.cr
react 使用antd 的table组件，批量操作后还存留之前的打钩项
zoepriselife316的博客
10-11 1351
官网提供一个方法代码如下： import { Table, Button } from 'antd'; const columns = [{ title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, { title: '住址', dataIndex: 'address', }]; con...
react antd 下拉框设置修改的时候不刷新的问题
weixin_42327537的博客
10-29 1224
通过 let obj = { pushTime: '8:00', pushInfo: '1', pushDate: '20', }; form.setFieldsValue(obj) 可以实现刷新
使用react+ant design左侧导航默认选中和展开
热门推荐
luckysyy的博客
11-01 1万+
1.&lt;Menu theme='dark' mode='inline' selectedKeys={[selectedKey]} onClick={this.menuClick} onOpenChange={this.onOpenChange} openKeys={[openKey]}&lt;/Menu&gt; 2.this.state = { selectedKey: this.pro...
antd框架Menu中设置selectedKeys出现点一条多条被选问题
Lucivita的博客
08-13 4237
是由于未按照数组格式书写 this.setState({selectedKeys:[data.key]}即可 如需取消选择：this.setState({selectedKeys:['']})
React函数式组件使用ant表单中的重置表单功能
茂茂的博客
11-18 1966
React函数式组件使用ant表单中的重置表单功能 我们在使用react+ant组件开发的过程中，会遇见一种情况，就是我们在使用ant的表单的时候，想要在其他的处理函数之中去将表单的值给清空，那这个时候怎么办呢。 我们就需要引入form从ant中。 然后调用form里面的useform方法。 然后在表单里面给他绑定进去。 最后我们直接调用其提供的api即可。 ...
react antd实现左侧多级
11-21
以下是基于Ant Design Pro的动态菜单生成的完整方法附代码，可以实现左侧多级菜单： ```javascript import React from 'react';import { Menu, Icon } from 'antd'; import { Link } from 'dva/router'; import { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值