ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.35k stars 8.14k forks source link

左侧菜单栏渲染和缩进问题🐛[BUG] #6828

Closed linkai0001 closed 4 years ago

linkai0001 commented 4 years ago

🐛 bug 描述

问题一 选择左侧菜单某个一级栏目,刷新页面, 然后再去点击二级栏目,会出现二级栏目所在的一级栏目出现先收缩,在展开,在选中。 备注: 后续不刷新页面情况下操作,问题将不会出现

问题二 选择左侧菜单某个一级栏目,刷新页面,然后选择隐藏左侧菜单(只展示菜单的 icon), 点击其他菜单, 左侧菜单会重新展开 备注: 后续不刷新页面情况下操作,问题将不会出现 📷 复现步骤 问题一复现步骤 选择一级菜单 刷新页面 选择二级菜单

问题二复现步骤 选择一级菜单 刷新页面 选择隐藏左侧菜单 选择其他菜单

🏞 期望结果 问题一期望结果 点击二级菜单时,不需要先收缩在展开

问题二期望结果 点击其他菜单时,左侧菜单不需要重新展开

hello , 大大,如下问题有好的解决方案吗? 初步怀疑应该是每次点击左侧栏目菜单时,根据路由的配置,每次都是需要做 ProLayout 的重新渲染导致。

比如问题二,刷新页面后,并让栏目在收起状态下,点击栏目,重新调用 onCollapse 配置函数,传入 false ,重新渲染了 collapsed 的值, 导致菜单展开,这个函数的调用怎么会是点击菜单触发呢??

但很奇怪这个问题只发生在刷新页面后的第一次操作中。

💻 复现代码 © 版本信息 Ant Design Pro 版本: [e.g. 4.0.0] 4.0.0 umi 版本 umi3.2.3 浏览器环境 谷歌 开发环境 windows 🚑 其他信息 问题一 image

问题二 image

leesama commented 4 years ago

升级最新的prolayout 可以解决该问题

linkai0001 commented 4 years ago

通过测试, 把 umi 版本降低至 3.1.4 或 3.2.0 可以解决该问题。 @ant-design/pro-layout尝试升级到 6.0.0-7 ,是存在问题的,可能姿势不对哈。

chenshuai2144 commented 4 years ago

你描述的问题应该都是重定向导致的,点击带有重定向的菜单的时候整个组件都被删除又渲染了,应该是umi中改动了什么导致的

sorrycc commented 4 years ago

哪个版本里出现的?没记得最近有路由相关改动。

linkai0001 commented 4 years ago

你描述的问题应该都是重定向导致的,点击带有重定向的菜单的时候整个组件都被删除又渲染了,应该是umi中改动了什么导致的

嗯, 感谢

linkai0001 commented 4 years ago

哪个版本里出现的?没记得最近有路由相关改动。

更新下来的代码配置了 "umi": "^3.1.2" 。 安装依赖库将匹配最大版本的依赖包,查看了版本是 3.2.3

LiUhoNgDan222 commented 4 years ago

可以发一下你们的具体的版本号吗,我现在也遇到菜单点击之后不选中然后二级菜单点了一级会收缩的问题,我试了大家说的各种版本还是不行

linkai0001 commented 4 years ago

可以发一下你们的具体的版本号吗,我现在也遇到菜单点击之后不选中然后二级菜单点了一级会收缩的问题,我试了大家说的各种版本还是不行

hello, 提供下你的 package.json

LiUhoNgDan222 commented 4 years ago

可以发一下你们的具体的版本号吗,我现在也遇到菜单点击之后不选中然后二级菜单点了一级会收缩的问题,我试了大家说的各种版本还是不行

hello, 提供下你的 package.json

{ "name": "app-admin", "version": "1.0.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 umi build", "build": "umi build", "deploy": "npm run site && npm run gh-pages", "dev": "npm run start:dev", "fetch:blocks": "pro fetch-blocks --branch=umi@3 && npm run prettier", "gh-pages": "cp CNAME ./dist/ && gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier --check \"/*\" --end-of-line auto", "lint:style": "stylelint --fix \"src/*/.less\" --syntax less", "prettier": "prettier -c --write \"/*\"", "start": "umi dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev", "start:no-mock": "cross-env MOCK=none umi dev", "start:no-ui": "cross-env UMI_UI=none umi dev", "start:pre": "cross-env REACT_APP_ENV=pre umi dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev", "test": "umi test", "test:all": "node ./tests/run-tests.js", "test:component": "umi test ./src/components", "tsc": "tsc" }, "husky": { "hooks": { "pre-commit": "npm run lint-staged" } }, "lint-staged": { "/*.less": "stylelint --syntax less", "*/.{js,jsx,ts,tsx}": "npm run lint-staged:js", "/*.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" ] }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "dependencies": { "@ant-design/icons": "^4.1.0", "@ant-design/pro-layout": "^6.0.0-4", "@ivs/pro-table": "^1.0.3", "antd": "^4.2.5", "classnames": "^2.2.6", "crypto-js": "^4.0.0", "jsencrypt": "^3.0.0-rc.1", "lodash": "^4.17.11", "moment": "^2.24.0", "omit.js": "^1.0.2", "path-to-regexp": "2.4.0", "qs": "^6.9.0", "react": "^16.8.6", "react-amap": "^1.2.8", "react-dom": "^16.8.6", "react-helmet-async": "^1.0.4", "react-watermark-component": "^2.2.1", "umi": "^3.0.14", "umi-request": "^1.0.8", "use-merge-value": "^1.0.1" }, "devDependencies": { "@ant-design/pro-cli": "^1.0.20", "@types/classnames": "^2.2.7", "@types/express": "^4.17.0", "@types/history": "^4.7.2", "@types/jest": "^25.1.0", "@types/lodash": "^4.14.144", "@types/qs": "^6.5.3", "@types/react": "^16.9.17", "@types/react-dom": "^16.8.4", "@types/react-helmet": "^5.0.13", "@umijs/fabric": "^2.0.5", "@umijs/plugin-blocks": "^2.0.5", "@umijs/preset-ant-design-pro": "^1.0.1", "@umijs/preset-react": "^1.4.8", "@umijs/preset-ui": "^2.0.9", "chalk": "^3.0.0", "cross-env": "^7.0.0", "cross-port-killer": "^1.1.1", "enzyme": "^3.11.0", "express": "^4.17.1", "gh-pages": "^2.0.1", "husky": "^4.0.7", "jsdom-global": "^3.0.2", "lint-staged": "^10.0.0", "mockjs": "^1.0.1-beta3", "prettier": "^2.0.1", "pro-download": "1.0.1", "stylelint": "^13.0.0" }, "optionalDependencies": { "puppeteer": "^2.0.0" }, "engines": { "node": ">=10.0.0" }, "checkFiles": [ "src//.js", "src//.ts", "src/*/.less", "config//.js", "scripts//*.js" ] }

linkai0001 commented 4 years ago

"umi": "^3.0.14",

hello,你配置的umi 是 "umi": "^3.0.14" , 更新依赖库时将更新 umi 最新版本(加了 ^ 符号),你可以通过 node_modules 查看验证。 把 "umi": "^3.0.14" 改为 "umi": "3.0.14" ,重新更新下依赖就可以了

chenshuai2144 commented 4 years ago

umi@3.2.13 已经发布,解决了