ant-design / ant-design-pro-layout

🌃 Powerful and easy to use beautiful layout
https://prolayout.ant.design/
MIT License
1k stars 239 forks source link

🧐 defaultOpenAll 选项在切换页面之后失效了 #594

Closed HelKyle closed 3 years ago

HelKyle commented 3 years ago

🧐 问题描述

设置 menu.defaultOpenAll 为 true

预期

默认进入页面展开所有的 menu,之后可以切换到任意页面,切换 menu 折叠/展开。

实际上

首次进入页面,menu 全部展开,切换两次路由之后,非当前页面的 menu 会收起。

💻 示例代码

经过 debug,问题应该是由下面这个 effect 导致的,首次进入 defaultOpenAlltrue 表现正常,第二次切换页面 defaultOpenAll 变成 false,setOpenKeys(keys) 就会关闭其他 menu 。不太理解 setDefaultOpenAll(false) 的作用是什么,求解答。

  useEffect(() => {
    // if pathname can't match, use the nearest parent's key
    const keys = getSelectedMenuKeys(location.pathname || '/', menuData || []);
    const animationFrameId = requestAnimationFrame(() => {
      setSelectedKeys(keys);
      if (!defaultOpenAll && propsOpenKeys !== false) {
        setOpenKeys(keys);
      } else if (flatMenuKeys.length > 0) {
        setDefaultOpenAll(false);
      }
    });
    return () =>
      window.cancelAnimationFrame &&
      window.cancelAnimationFrame(animationFrameId);
  }, [pathname, flatMenuKeys.join('-')]);
chenshuai2144 commented 3 years ago

defaultOpenAll 只有第一次渲染有用,别的时候就没用了。 如果总是要打开,你需要自己用 openkeys 去受控操作