React Contexify 使用教程

项目介绍

React Contexify 是一个用于在 React 应用中创建上下文菜单（右键菜单）的开源库。它允许开发者轻松地在任何 React 组件中添加自定义的上下文菜单，提供了丰富的 API 和事件处理机制，使得上下文菜单的创建和管理变得简单高效。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 react-contexify：

npm install react-contexify

或者

yarn add react-contexify

基本使用

以下是一个简单的示例，展示如何在 React 组件中使用 react-contexify：

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

const MENU_ID = 'menu_id';

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

  const handleItemClick = ({ event, props, trigger }) => {
    console.log('Item clicked', props, trigger);
  };

  return (
    <div>
      <div onContextMenu={show}>
        Right click here
      </div>
      <Menu id={MENU_ID}>
        <Item onClick={handleItemClick}>Item 1</Item>
        <Item onClick={handleItemClick}>Item 2</Item>
      </Menu>
    </div>
  );
}

export default App;

应用案例和最佳实践

自定义样式

React Contexify 允许你通过 CSS 类来自定义菜单的样式。以下是一个自定义样式的示例：

import React from 'react';
import { Menu, Item } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';
import './custom-menu.css';

const MENU_ID = 'custom_menu_id';

function CustomMenu() {
  return (
    <Menu id={MENU_ID} className="custom-menu">
      <Item>Custom Item 1</Item>
      <Item>Custom Item 2</Item>
    </Menu>
  );
}

export default CustomMenu;

在 custom-menu.css 文件中，你可以添加自定义样式：

.custom-menu {
  background-color: #333;
  color: #fff;
}

.custom-menu .react-contexify__item__content {
  padding: 8px 16px;
}

动态菜单项

你可以根据应用的状态动态生成菜单项。以下是一个动态生成菜单项的示例：

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

const MENU_ID = 'dynamic_menu_id';

function DynamicMenu() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  const handleItemClick = ({ event, props }) => {
    console.log('Item clicked', props);
  };

  return (
    <div>
      <div onContextMenu={show}>
        Right click here
      </div>
      <Menu id={MENU_ID}>
        {items.map((item, index) => (
          <Item key={index} onClick={handleItemClick}>{item}</Item>
        ))}
      </Menu>
    </div>
  );
}

export default DynamicMenu;

典型生态项目

React Contexify 可以与其他 React 生态项目结合使用，例如：

• Redux: 用于状态管理，可以在菜单项点击事件中 dispatch Redux actions。
• Material-UI: 用于样式和组件库，可以结合 Material-UI 的样式和组件来创建更美观的上下文菜单。
• React Router: 用于路由