使用react-contexify实现ant design tree控件右键菜单功能

右键菜单组件

react-contexify：https://www.npmjs.com/package/react-contexify

react-contexify组件的坑

我用react-contexify组件的的版本是5.0.0，组件里好像没有 MenuProvider 了。
react-contexify组件给了我们一个示例，但是这示例有点问题。我copy进去报错。

const { show } = useContextMenu({
	id: MENU_ID,
});
 
// 错误示例
function handleContextMenu(event){
	event.preventDefault();
	show({
		event, // 这里是错的
		props: {
			key: 'value'
		}
	})
}
// 正确写法
function handleContextMenu(event){
	event.preventDefault();
	// event应该写在大括号外面
	show(event, {
		props: {
			key: 'value'
		}
	})
}

直接上代码，我用的Typescript

import { Tree } from 'antd';

import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

// treeNodes 数据，我的antd版本是4.10.0的，好像不建议我用TreeNode节点了
const dataTree = [
  {
    key: 1,
    id: 1,
    title: '冰菓',
    category: 1,
    children: [
      {
        id: 2,
        key: 2,
        title: '古典部',
        category: 1,
        children: [
          {
            id: 5,
            key: 5,
            title: '折木奉太郎',
            category: 0,
            children: []
          },
          {
            id: 6,
            key: 6,
            title: '千反田爱瑠',
            category: 0,
            children: []
          },
          {
            id: 7,
            key: 7,
            title: '福部里志',
            category: 0,
            children: []
          },
          {
            id: 8,
            key: 8,
            title: '伊原摩耶花',
            category: 0,
            children: []
          },
        ]
      }
    ]
  }
];


const MENU_ID = '1';

// 右键菜单点击事件，props里就是节点数据
const handleItemClick = ({ event, props }) => console.log(event, props);

const testMenu = {
  menuId: MENU_ID,
  items: [
    { key: 1, name: '添加子节点', handler: handleItemClick },
    { key: 2, name: '添加同级节点', handler: handleItemClick },
    { key: 3, name: '修改节点', handler: handleItemClick },
    { key: 4, name: '删除节点', handler: handleItemClick },
  ],
};

const TreeContextMenu = ({ dataSource, contextMenu }) => {
  // 右键菜单
  const ContextMenu = () => (
    <Menu id={contextMenu.menuId}>
      {contextMenu.items.map(item => (
      	// 这里需要加key，不然要报错
        <Item key={item.key} onClick={item.handler}>{item.name}</Item>
      ))}
    </Menu>
  );

  const { show } = useContextMenu({
    id: MENU_ID,
  });

  // 右键显示菜单
  const handleContextMenu = (event, node) => {
	console.log(event)
	console.log(node)	// node就是节点数据
    event.preventDefault();
    show(event,{
      props: node,
    });
  }

  return (
    <div>
      <Tree
        autoExpandParent
        defaultExpandAll
        defaultExpandParent
        treeData={dataSource}
        // 右键事件
        onRightClick={({event, node}: any) => {
            handleContextMenu(event, node)
        }}
      />
      // 菜单
      <ContextMenu />
    </div>
  );
};

const Category: React.FC = () => {
  return (
    <>
      <PageContainer>
        <ProCard split="vertical">
          <ProCard title="左侧树形" colSpan="30%">
            {/* <TypeTree /> */}
            {TreeContextMenu({dataSource: dataTree, contextMenu:testMenu})}
          </ProCard>
          <ProCard title="左右分栏子卡片带标题" headerBordered>
            右侧内容
          </ProCard>
        </ProCard>
      </PageContainer>
    </>
  );
};

export default Category;

参考文献

https://blog.csdn.net/truewq/article/details/109113794