记录使用antd中的menu组件，以及使用中碰到的问题

一、功能要求

页面左侧是菜单栏，菜单栏中有分类，分类下有子分类，鼠标移入子分类上需要显示三个点，显示下拉操作选项。点击子分类右侧需要展示对应的表单，是用的套用的组件方式。之后因为同事也需要使用左侧菜单，但是右侧展示的内容不一样，所以抽离了一些代码，有些地方可以自行优化。

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；

二、实现思路

首先引入antd的Menu组件，调接口渲染出数据，defaultSelectedKeys和defaultOpenKeys只在初始化的时候有效，建议直接使用selectedKeys避免不必要的错误。
在Menu.Item里，onMouseEnter设置了鼠标移入事件，保存移入id值。在Menu中设置了onMouseLeave移除事件。
因为Menu中如果点击编辑主题或删除按钮的话，Menu的onClick也会触发，所以直接在onClick事件中判断是edit还是del

//逻辑代码
  const toggleCollapsed = useCallback(() => {
    setCollapsed(!collapsed)
  }, [collapsed])

  useEffect(() => {
    getMenuList()
  }, [])

  //获取menu列表 并且设置需要默认展开的menu.item
  const getMenuList = useCallback(async (type, addName) => {
    let { list } = await getMonitorPageList()
    setGetPageList(list)
    let keys = list.filter((r) => {
      if (r.list.length !== 0) {
        return r
      }
    })
    if (keys.length !== 0) {
      let item = keys[0].list[0]
      if (type == "add") {
        let newItem = different(list,addName)  
        setOpenKeys([newItem.categoryId])
        setSelectedKeys([newItem.topicId]) 
         setClickMenuId(newItem.topicId)
      } else {
        setOpenKeys([item.categoryId])
        setSelectedKeys([item.topicId])
        setClickMenuId(item.topicId)
      }
    }
  }, [getPageList])

  // 判断新增的哪一项
  const different =(list, name) => { 
      for (let i = 0; i < list.length; i++) { 
        if (list[i]["list"].length!==0) { 
        let result= list[i]["list"].find(r=>r['topicName']==name)
          if(result){ 
           return result
          }
        }
      }
    }

  const onClickChange = useCallback(
    async ({ key, domEvent }) => {
      setClickMenuId(key)
      setSelectedKeys([key])
      if (domEvent.target.dataset.id == "edit") {
        let results = await menuDetail({ topicId: key })
        setMenuDetails(results)
        toggleCollapsed()
        setAddMenu(true)
      } else if (domEvent.target.dataset.id == "del") {
        confirm({
          title: `确定要删除吗？`,
          onOk() {
            delMenu({ topicId: key }).then((res) => {
              if (res) {
                getMenuList()
              }
            })
          },
          onCancel() { },
        })
      } else {
        setArticle({})
        setAddMenu(false)
      }
    },
    [clickMenuId]
  )

  const onSearch = useCallback(async (value) => {
    let { list } = await searchMenu({
      search: value,
      flag: 1,
    })
    let keys = list.filter((r) => {
      if (r.list.length !== 0) {
        return r
      }
    })
    if (keys.length !== 0) {
      let item = keys[0].list[0]
      setOpenKeys([item.categoryId])
      setSelectedKeys([item.topicId])
      setClickMenuId(item.topicId)
      setGetPageList(list)
      if (value.trim()) {
        success(`查询成功!`)
      }
    } else {
      error(`没有搜索到${value}！`)
    }
  }, [])

  const openMenu = useCallback((openKeys) => {
    setOpenKeys(openKeys)
  }, [])

          <Menu
            onOpenChange={openMenu} //选中SubMenu的回调
            openKeys={collapsed ? [] : openKeys} //展开的SubMenu
            selectedKeys={selectedKeys} //选中的menu_item
            onMouseLeave={() => setMouseOverId(null)}
            /*       defaultSelectedKeys={[defaultKeys[1]]}
              defaultOpenKeys={[defaultKeys[0]]} */
            onClick={onClickChange}
            mode="inline"
            inlineCollapsed={collapsed}
          >
            {getPageList.map((item, index) => {
              return (
                <SubMenu
                  key={item.categoryId}
                  title={
                    <span >
                      <img src={iconList[index]} style={{ width: '18px', height: '18px', verticalAlign: 'middle', marginRight: '9px' }} />
                      {!collapsed && <b style={{ fontSize: '18px', color: '#333', verticalAlign: 'middle' }}>{item.categoryName}</b>}
                    </span>
                  }
                >
                  {item.list
                    ? item.list.map((child) => (
                      <Menu.Item
                        key={child.topicId}
                        onMouseEnter={() => setMouseOverId(child.topicId)}
                      >
                        <span style={{ fontSize: '16px' }}>{child.topicName}</span>
                        {mouseOverId == child.topicId ? (
                          <Tooltip
                            overlayClassName="jc-tooltip"
                            title={
                              <ul className={styles.tooltipUl}>
                                <li>
                                  <Button data-id="edit">编辑主题</Button>
                                </li>
                              </ul>
                            }
                            placement="bottom"
                          >
                            <Icon
                              type="ellipsis"
                              style={{
                                fontSize: 20,
                                float: "right",
                                lineHeight: "40px",
                              }}
                            />
                          </Tooltip>
                        ) : (
                          ""
                        )}
                      </Menu.Item>
                    ))
                    : ""}
                </SubMenu>
              )
            })}
          </Menu>