React 在函数式组件中使用antd的Menu组件时默认展开的问题

React 在函数式组件中使用antd的Menu组件时默认展开的问题

文章转载自这里

期望效果：

我想在更改/更新defaultOpenKeys值时打开（展开）特定菜单的子菜单。

我所尝试的：

const [submenu, setSubmenu] = useState([]);
useEffect(() => {
setSubmenu([“sub1”]);
}, []);

<Menu style={{ width: 256 }} defaultSelectedKeys={["4"]} defaultOpenKeys={submenu} mode="inline">
  <Menu.Item key="1">Option 1</Menu.Item>
  <Menu.Item key="2">Option 2</Menu.Item>
  <SubMenu key="sub1" title="Submenu">
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </SubMenu>
</Menu>;

在这里，子菜单起初是一个空数组，但每当页面加载时，useEffect会更新submenu的值并设置为[“sub1”]。我认为，每当状态值发生变化时，页面应该re-render，所以<Menu defaultOpenKeys={[‘sub1’]} …>应该像这样更新，对吗？

但是在这里，如果我首先传递<Menu defaultOpenKeys=[‘sub1’] … >，那么它会像我预期的那样工作。但是如果我从状态传递defaultOpenKeys值，那么它不会像我预期的那样工作（如果状态的初始值是[‘sub1’]，那么它也可以正常工作）。

这是代码沙盒，我在其中包括了工作和不工作的演示。

CODESANDBOX

我试过使用antd提供的另一个属性，它是openKeys，它一开始确实打开了子菜单，但无法关闭它，甚至它确实阻止了其他子菜单的打开/关闭。

<Menu
 style={{ width: 256 }}
 defaultSelectedKeys={["4"]}
 openKeys={submenu} // blocks other submenu by closing and opening
 mode="inline"
>

解答：
使用openKeys和handle onOpenChange将新的openKeys设置为子菜单状态，这很好：

 const [submenu, setSubmenu] = useState([]);
  useEffect(() => {
    setSubmenu(["sub1"]);
  }, []);
  return (
    <Menu
      style={{ width: 256 }}
      defaultSelectedKeys={["4"]}
      defaultOpenKeys={submenu}
      openKeys={submenu}
      // 注意这个属性 `onOpenChange`
      onOpenChange={(openKeys) => {
       setSubmenu(openKeys);
      }}
      mode="inline"
    >
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
      <SubMenu key="sub1" title="Submenu">
        <Menu.Item key="3">Option 3</Menu.Item>
        <Menu.Item key="4">Option 4</Menu.Item>
      </SubMenu>
    </Menu>
  );

单独使用onOpenKey属性的时候会在刷新的时候展开设置的submenu,但无法关闭它，甚至它确实阻止了其他子菜单的打开/关闭。当我们加上了onOpenChange属性的时候就能够实现对其他子菜单的打开/关闭了。