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’],那么它也可以正常工作)。
这是代码沙盒,我在其中包括了工作和不工作的演示。
我试过使用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属性的时候就能够实现对其他子菜单的打开/关闭了。