【react + design】创建右键菜单

需要点击弹出右键菜单，直接上代码

import { Tree } from "antd"
import type { DataNode, TreeProps } from "antd/lib/tree"
import React from "react"
import { createRoot } from "react-dom/client"

const treeData: DataNode[] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            disableCheckbox: true
          },
          {
            title: "leaf",
            key: "0-0-0-1"
          }
        ]
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ title: <span style={{ color: "#1890ff" }}>sss</span>, key: "0-0-1-0" }]
      }
    ]
  }
]

let cmContainer = null // 右键菜单元素
const App: React.FC = () => {
  // 右键显示菜单
  const handleContextMenu = (event: any, node: any) => {
    // 父节点
    const contextMenu = (
      <div
        onMouseLeave={() => {
          cmContainer.style.display = "none"
        }}
      >
        展示右键菜单
      </div>
    )
    renderCm(event, contextMenu)
  }

  const renderCm = (info, dom) => {
    if (!cmContainer) {
      getContainer(dom)
    }

    // 设置右键菜单的样式
    Object.assign(cmContainer.style, {
      position: "absolute",
      left: `${info.pageX}px`,
      top: `${info.pageY}px`,
      bottom: null,
      display: "block",
      zIndex: 9999
    })
  }

  const getContainer = (dom) => {
    cmContainer = document.createElement("div")
    cmContainer.className = "mars-menucontent"
    document.body.appendChild(cmContainer)

    const rederDom = createRoot(cmContainer)
    rederDom.render(dom)
  }

  return (
    <Tree
      checkable
      treeData={treeData}
      onRightClick={({ event, node }: any) => {
        handleContextMenu(event, node)
      }}
    />
  )
}

export default App