解决antd side侧边栏菜单收缩时二级菜单不跟随

Might°

已于 2022-08-19 16:17:59 修改

阅读量1.7k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-08-19 16:17:35 首次发布

本文链接：https://blog.youkuaiyun.com/kzj0916/article/details/126427144

版权

React 专栏收录该内容

10 篇文章

订阅专栏

本文分享了如何修复React中Sider组件在切换折叠状态时二级菜单选中项回闪的问题，通过useState和useEffect结合实现动态调整openKeys。适合遇到类似bug的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bug

我又回来了，BUG BUG BUG…
借用下图片，大概就是这种bug，直接看怎么解决吧，简单记录一下，有遇到相同问题的可以试试我这样的方法。

在这里插入图片描述

解决！

import React, { memo, useMemo, useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { useSelector, shallowEqual } from "react-redux";
import { Layout, Menu } from "antd";
import { SildeMenuWrapper } from "./style";
import { mapIconMenus, deepCopy } from "@/utils/devUtils";
const { Sider } = Layout;

const SideMenu = memo((props: any) => {
  const location = useLocation();
  // 路由路径
  const path = location.pathname;
  // 默认展开的父节点菜单路径
  const selectOpen = "/" + (path && path.split("/")[1]);
  // 用于监听 props.collapsed 改变 在改变前处理 二级菜单选中回闪的bug
  const [collapsed, setcollapsed] = useState(props.collapsed);
  //  动态改变openKeys的值
  const [menuProps, setmenuProps] = useState({});

  const { menus } = useSelector(
    (state: any) => ({
      menus: state.login.menus,
    }),
    shallowEqual
  );
  // 拿到处理后的菜单数据 先深拷贝再处理 不然会影响到redux中的值
  const endMenus = useMemo(() => mapIconMenus(deepCopy(menus)), [menus]);
  const navigate = useNavigate();
  // 选中菜单的回调
  const selectMenu = ({ key, domEvent }: any) => {
    navigate(key);
  };
  // 展开菜单的回调
  const openMenu = (opens: any) => {
    setmenuProps({ openKeys: opens });
  };
  // 用于监听 props.collapsed 改变 收缩前先关闭所有展开项 打开前先展开当前选中项
  useEffect(() => {
    if (!props.collapsed) {
      setcollapsed(props.collapsed);
      setTimeout(() => {
        setmenuProps({ openKeys: [selectOpen] });
      }, 0);
    } else {
      setmenuProps({ openKeys: [] });
      setcollapsed(props.collapsed);
    }
  }, [props.collapsed, selectOpen]);

  return (
    <SildeMenuWrapper>
      <Sider trigger={null} collapsible collapsed={collapsed} width={250}>
        <div className="all-menus">
          <div
            className="logo"
            style={{ display: collapsed ? "none" : "block" }}
          >
            全球新闻发布管理系统
          </div>
          <div className="menus">
            <Menu
              mode="inline"
              theme="dark"
              selectedKeys={[path]}
              defaultOpenKeys={[selectOpen]}
              {...menuProps}
              items={endMenus}
              onSelect={selectMenu}
              onOpenChange={openMenu}
            />
          </div>
        </div>
      </Sider>
    </SildeMenuWrapper>
  );
});

export default SideMenu;

核心代码都在上面，且有注释！
完整代码看此处项目源码