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 协议 ,转载请注明出处!