刷新
0%

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)