react + design创建右键菜单

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

1.  
   import { Tree } from "antd"
2.  
   import type { DataNode, TreeProps } from "antd/lib/tree"
3.  
   import React from "react"
4.  
   import { createRoot } from "react-dom/client"
5.  
    
6.  
   const treeData: DataNode[] = [
7.  
   {
8.  
   title: "parent 1",
9.  
   key: "0-0",
10.  
    children: [
11.  
    {
12.  
    title: "parent 1-0",
13.  
    key: "0-0-0",
14.  
    disabled: true,
15.  
    children: [
16.  
    {
17.  
    title: "leaf",
18.  
    key: "0-0-0-0",
19.  
    disableCheckbox: true
20.  
    },
21.  
    {
22.  
    title: "leaf",
23.  
    key: "0-0-0-1"
24.  
    }
25.  
    ]
26.  
    },
27.  
    {
28.  
    title: "parent 1-1",
29.  
    key: "0-0-1",
30.  
    children: [{ title: <span style={{ color: "#1890ff" }}>sss</span>, key: "0-0-1-0" }]
31.  
    }
32.  
    ]
33.  
    }
34.  
    ]
35.  
     
36.  
    let cmContainer = null // 右键菜单元素
37.  
    const App: React.FC = () => {
38.  
    // 右键显示菜单
39.  
    const handleContextMenu = (event: any, node: any) => {
40.  
    // 父节点
41.  
    const contextMenu = (
42.  
    <div
43.  
    onMouseLeave={() => {
44.  
    cmContainer.style.display = "none"
45.  
    }}
46.  
    >
47.  
    展示右键菜单
48.  
    </div>
49.  
    )
50.  
    renderCm(event, contextMenu)
51.  
    }
52.  
     
53.  
    const renderCm = (info, dom) => {
54.  
    if (!cmContainer) {
55.  
    getContainer(dom)
56.  
    }
57.  
     
58.  
    // 设置右键菜单的样式
59.  
    Object.assign(cmContainer.style, {
60.  
    position: "absolute",
61.  
    left: `${info.pageX}px`,
62.  
    top: `${info.pageY}px`,
63.  
    bottom: null,
64.  
    display: "block",
65.  
    zIndex: 9999
66.  
    })
67.  
    }
68.  
     
69.  
    const getContainer = (dom) => {
70.  
    cmContainer = document.createElement("div")
71.  
    cmContainer.className = "mars-menucontent"
72.  
    document.body.appendChild(cmContainer)
73.  
     
74.  
    const rederDom = createRoot(cmContainer)
75.  
    rederDom.render(dom)
76.  
    }
77.  
     
78.  
    return (
79.  
    <Tree
80.  
    checkable
81.  
    treeData={treeData}
82.  
    onRightClick={({ event, node }: any) => {
83.  
    handleContextMenu(event, node)
84.  
    }}
85.  
    />
86.  
    )
87.  
    }
88.  
     
89.  
    export default App

这篇好文章是转载于：学新通技术网