PrimeReact Diamond模板设置expanded为true后菜单项默认不展开如何解决

• 原因说明：Diamond主题封装的菜单组件为受控模式，仅在菜单项配置中添加expanded:true不会生效，需要搭配菜单组件的expandedKeys属性完成配置
• 解决步骤：
  1. 给所有带子菜单的父级菜单项添加唯一的key标识，修改你的菜单配置如下：

  {
       key: 'email-menu', // 新增全局唯一的key值
       label: "Email", icon: "pi pi-fw pi-inbox",
       items: [
           {
               label: "My Email", icon: "pi pi-fw pi-inbox", to: '/email'
           },  
           {
               label: "Company Emails", icon: "pi pi-fw pi-inbox", to: '/company-email',
           },  
       ],
  },
  

  2. 在引用菜单组件的位置声明expandedKeys状态，把需要默认展开的菜单key加入状态中：

  import { useState } from 'react';
  import AppMenu from './AppMenu'; // 你的菜单组件引入路径
  
  const YourComponent = () => {
    // PrimeReact v8及以上版本使用对象格式，key为菜单标识，值为true表示展开
    const [expandedKeys, setExpandedKeys] = useState({
      'email-menu': true
    });
  
    return (
      <AppMenu 
        model={yourMenuConfig} // 你的总菜单配置
        expandedKeys={expandedKeys}
        onExpandedKeysChange={(e) => setExpandedKeys(e.value)}
      />
    )
  }
  

  3. 如果需要按条件动态展开菜单，直接修改expandedKeys状态即可，比如监听当前路由匹配对应父菜单key，修改状态值就能触发菜单展开。
• 注意事项：仅包含items属性的父级菜单项需要配置key，子菜单项不需要额外配置expanded相关属性。

内容的提问来源于stack exchange，提问作者Vaibhav Gidde