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