Antd的Menu子菜单点击无法展开怎么办？

你这个情况多半是key值没设置对，或者事件绑定有问题。Antd的Menu组件必须给每个MenuItem和SubMenu都设置唯一的key属性，不然它没法正确管理展开状态。

直接用这个改好的代码：

import React, { useState } from 'react';

import { Menu } from 'antd';

const { SubMenu } = Menu;



function SiderMenu() {

    const [openKeys, setOpenKeys] = useState([]);



    const onOpenChange = (keys) => {

        setOpenKeys(keys);

    };



    return (

        <Menu

            mode="inline"

            openKeys={openKeys}

            onOpenChange={onOpenChange}

        >

            <SubMenu key="user" title="用户管理">

                <Menu.Item key="user-list">用户列表</Menu.Item>

                <Menu.Item key="user-permission">权限设置</Menu.Item>

            </SubMenu>

        </Menu>

    );

}



export default SiderMenu;

几个关键点：
1. 每个SubMenu和MenuItem都必须有唯一的key
2. 使用openKeys和onOpenChange来控制展开状态
3. 别忘了引入useState

我之前也踩过这个坑，光设置defaultOpenKeys没用，得配合状态管理才行。这代码我项目里在用，肯定能跑。

检查一下是不是少绑定 onOpenChange 了，或者 openKeys 状态没正确管理。antd 的 Menu 如果是受控模式，需要同时维护 openKeys 状态并绑定 onOpenChange。

直接用这个完整示例：

import React, { useState } from 'react';

import { Menu } from 'antd';

import { UserOutlined, SettingOutlined } from '@ant-design/icons';



const App = () => {

  const [openKeys, setOpenKeys] = useState([]);



  const onOpenChange = (keys) => {

    const latestOpenKey = keys.find(key => !openKeys.includes(key));

    if (latestOpenKey) {

      setOpenKeys(keys);

    } else {

      setOpenKeys(keys.filter(key => key !== latestOpenKey));

    }

  };



  return (

    

      } title="用户列表">

        选项1

        选项2

      

      } title="权限设置">

        选项3

        选项4

      

    

  );

};



export default App;

这样就能正常展开子菜单了，别忘了加状态管理。