antd menu组件
antd menu组件
继续记录antd+react使用
场景
1.每次刷新浏览器后,menu应该继续选中当前url对应的menuitem
2.限制只能打开一个menugroup
代码&思路
每次刷新浏览器后,menu应该继续选中当前url对应的menuitem
- 场景1思路:利用react路由的withRouter包裹当前组件,然后组件内部通过props就可以得到当前路由对象location;location的pathname就是当前的url,然后将该值赋给defaultSelectedKeys即可
- 场景2思路:menu组件打开的menu是通过openKeys控制,每次点击要打开的menu的时候,去将openkeys绑定的数组重置为当前点击的菜单的key即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47// Nav组件
import { withRouter } from 'react-router-dom';
const Nav=({location})=>{
const [keys, setKeys] = useState(['sub1'])
const saveKeys = ({ key }) => {
setKeys(() => [key])
}
return (
<Menu
onClick={handleClick}
defaultSelectedKeys={[location.pathname]}
openKeys={keys}
mode="inline"
style={{ width: "100 %", height: "100%" }}
>
<SubMenu
onTitleClick={saveKeys}
key="sub0"
title={
<span>
<CopyOutlined />
<span>概览</span>
</span>
}
>
<Menu.Item key="/">
<Link to="/">首页</Link>
</Menu.Item>
</SubMenu>
<SubMenu
onTitleClick={saveKeys}
key="sub0"
title={
<span>
<CopyOutlined />
<span>概览</span>
</span>
}
>
<Menu.Item key="/about">
<Link to="/about">关于</Link>
</Menu.Item>
</SubMenu>
</Menu>
)
}
export default withRouter(Nav)
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!