如何在组件内使用Ant Design Menu时取消选中Menu.Item、实现单选效果？

Ant Design 的 Menu 组件单选逻辑需要手动绑定状态控制，按下面步骤修改即可：

1. 先在组件内部声明状态存储当前选中的菜单项唯一标识

import { useState } from 'react'

// 组件逻辑内部声明
const [selectedMenuKey, setSelectedMenuKey] = useState('')

2. 给 Menu 组件绑定选中状态和切换回调，同时注意菜单项的 key 要使用唯一值（不要用遍历的index，避免列表顺序变化时状态错乱，这里直接用category.name即可）

修改后的完整代码如下：

<StyledCollapse ghost>
  {categoriesTree ? (
    categoriesTree.map((item, index) => {
      return (
        <Panel key={index} header={<StyledCategoryRow>{item.name}</StyledCategoryRow>}>
          {/* 绑定selectedKeys和onSelect事件实现单选 */}
          <StyledMenu 
            multiple={false}
            selectedKeys={[selectedMenuKey]}
            onSelect={({key}) => setSelectedMenuKey(key)}
          >
            {item.names.map((category) => {
              return (
                <StyledPlanMenuItem key={category.name}>
                  <Row align="middle" gutter={[8, 0]}>
                    <Col span={24}>
                      <Link to={getUrl(`/${category.name.replace(/\s/g, '')}`)}>
                        {category.name}
                      </Link>
                    </Col>
                  </Row>
                </StyledPlanMenuItem>
              );
            })}
          </StyledMenu>
        </Panel>
      );
    })
  ) : (
    <Spin />
  )}
</StyledCollapse>

如果需要和路由联动，打开页面时自动选中对应路径的菜单项，可以把selectedMenuKey的默认值设置为当前路由路径对应的菜单项key，或者监听路由变化自动更新selectedMenuKey即可。

内容的提问来源于stack exchange，提问作者Ammar ALSananni