javascript - 为什么在我的 Ant 设计中不能使用defaultOpenKeys？

我使用Ant设计->菜单/子菜单。

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

如果将defaultOpenKeys={["sub1"]}更改为defaultOpenKeys={["sub2"]}，则可以使用，但不适用于defaultOpenKeys={["sub1"]}

您能解释一下，为什么以及如何解决这个问题？

codeSanbox

最佳答案

Working example

您需要将key属性添加到CustomSubMenu组件中。

<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>
</>