al cambiar los valores de defaultOpenKeys no se vuelve a renderizar el componente de menú de antd
Lo que quiero:
Quiero abrir (expandir) el submenú de un menú específico cuando cambie/actualice el valor de defaultOpenKeys.
Lo que he intentado:
const [submenu, setSubmenu] = useState([]);
useEffect(() => {
setSubmenu(["sub1"]);
}, []);
...
<Menu style={{ width: 256 }} defaultSelectedKeys={["4"]} defaultOpenKeys={submenu} mode="inline">
<Menu.Item key="1">Opción 1</Menu.Item>
<Menu.Item key="2">Opción 2</Menu.Item>
<SubMenu key="sub1" title="Submenú">
<Menu.Item key="3">Opción 3</Menu.Item>
<Menu.Item key="4">Opción 4</Menu.Item>
</SubMenu>
</Menu>;
Aquí, el submenú es un array vacío al principio, pero cada vez que se carga la página, useEffect actualiza el valor de submenu y lo establece en ["sub1"]. Lo que creo es que, cuando los valores del estado cambian, la página debería volver a renderizarse, por lo que <Menu defaultOpenKeys={['sub1']} ...> debería actualizarse, ¿verdad?
Pero aquí, si paso <Menu defaultOpenKeys=['sub1&##39;] ... > al principio, esto funciona como esperaba, pero si paso el valor de defaultOpenKeys desde el estado, entonces esto no funciona como esperaba (si el valor inicial del estado es ['sub1'] entonces también funciona bien).
Aquí está el código sandbox, donde he incluido una demostración que funciona y otra que no funciona.
Aquí está la captura de pantalla:
ACTUALIZADO:
Después de la respuesta de @HDM91,
He intentado con otra prop proporcionada por antd, que es openKeys y abre el submenú al principio, pero no pude cerrarlo, ni bloquear que se abran/cierren otros submenús.
js
<Menu
style={{ width: 256 }}
defaultSelectedKeys={["4"]}
openKeys={submenu} // bloquea otros submenús al cerrarlos y abrirlos
mode="inline"
>
davy.ai
Apertura de submenú en Ant Design ReactJS
Para abrir (expandir) el submenú de un menú específico al cambiar/actualizar el valor de
defaultOpenKeys, en lugar de usardefaultOpenKeys, se puede utilizar la propopenKeysdel componenteMenu. La propopenKeyses un array de claves de los submenús actualmente abiertos. Se puede actualizar cuando el estado cambie para abrir un submenú específico.Ejemplo:
Aquí, el estado
openKeysse inicializa con["sub1"]para abrir elSubmenúcon clavesub1de forma predeterminada. El eventoonOpenChangese maneja para actualizar el estadoopenKeysal hacer clic en un elemento de menú.