更改 defaultOpenKeys 值不会重新渲染 antd 菜单组件

Question

我想要的：

我想在 change/update 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"]。我认为，只要状态值发生变化，页面就应该重新呈现，所以 <Menu defaultOpenKeys={['sub1']} ...> 应该像这样更新，对吗？

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

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

CODESANDBOX

截图如下：

更新：

@HDM91 回答后，

我试过antd提供的另一个道具openKeys，它一开始确实打开了子菜单，但无法关闭它，甚至它阻止了其他子菜单 opening/closing.

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

Answer 1

我刚刚尝试使用 openKeys 并处理 onOpenChange 以将新的 openkeys 设置为子菜单状态，没问题：

  const [submenu, setSubmenu] = useState([]);
  useEffect(() => {
    setSubmenu(["sub1"]);
  }, []);
  return (
    <Menu
      style={{ width: 256 }}
      defaultSelectedKeys={["4"]}
      defaultOpenKeys={submenu}
      openKeys={submenu}
      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>
  );

更改 defaultOpenKeys 值不会重新渲染 antd 菜单组件

on change of defaultOpenKeys values does not rer-ender antd menu component

reactjs

antd