javascript - 为什么在我的 ant design 中 defaultOpenKeys 不起作用？

Question

我使用 Ant Design -> 菜单/子菜单。

并且我编写了我的自定义功能组件CustomSubMenu，它只是显示Ant SubMenu 并在包装器组件Menu 中使用它，但是prop defaultOpenKeys 不适用于它。

如果您将 defaultOpenKeys={["sub1"]} 更改为 defaultOpenKeys={["sub2"]} 它有效，但不适用于 defaultOpenKeys={["sub1"]}

您能解释一下为什么会出现这个问题吗？我该如何解决？

codeSanbox

Answer 1

Working example

CustomSubMenu组件需要添加key属性。

<CustomSubMenu key='sub1' />

然后

const CustomSubMenu = ({ ...props }) => {
  return (
    <Menu.SubMenu title={<span>Navigation One</span>} {...props}>
      <Menu.Item key="5">Option 5</Menu.Item>
      <Menu.Item key="6">Option 6</Menu.Item>
    </Menu.SubMenu>
  );
};

后面的代码

<>
  <Menu defaultOpenKeys={["sub1"]} mode="inline" theme="dark">
    <Menu.Item key="1">
      <span>Option 1</span>
    </Menu.Item>

    <CustomSubMenu key='sub1' />

    <SubMenu key="sub2" title="Submenu">
      <Menu.Item key="11">Option 11</Menu.Item>
      <Menu.Item key="12">Option 12</Menu.Item>
    </SubMenu>
  </Menu>
</>