syncfusion-react-context-menu

实现 Syncfusion React Context Menu

完整 API 参考与功能指南

何时使用此技能

用户需要以下操作时，始终使用此技能：

• 安装和配置 Syncfusion React ContextMenu 组件
• 创建和管理菜单项（文本、图标、分隔符、嵌套菜单、URL）
• 使用 15+ 个方法以编程方式控制菜单
• 使用各自的事件参数处理全部 7 个事件
• 使用 CSS 类、主题、模板和动画自定义外观
• 从本地数据源或动态数据结构绑定数据
• 实现无障碍支持（键盘导航、ARIA、RTL、WCAG 2.2）
• 管理动态菜单（添加、移除、显示、隐藏、启用/禁用）
• 创建上下文相关操作（文件、编辑器、工作流）

---

入门

📄 阅读： references/getting-started.md

• 安装软件包（@syncfusion/ej2-react-navigations）
• 设置开发环境（Vite、Create React App）
• 导入 CSS 样式表并配置主题
• 实现基本的 ContextMenu
• 运行并测试应用程序

---

组件属性参考

ContextMenuComponent 接受 18+ 个配置属性，用于控制行为、外观和交互：

基本属性

target（必需）

类型： string

用于触发上下文菜单（右键单击或触摸并按住）的元素的 CSS 选择器。

<ContextMenuComponent target="#myElement" items={menuItems} />

示例： 在特定元素上触发

function App() {
  return (
    <div>
      <div id="target">Right-click here</div>
      <ContextMenuComponent target="#target" items={menuItems} />
    </div>
  );
}

---

items（必需）

类型： MenuItemModel[]

要显示的菜单项数组。每个菜单项都可以包含文本、图标、嵌套项、分隔符等。

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  {
    text: 'More',
    items: [
      { text: 'Properties' },
      { text: 'Delete' }
    ]
  }
];

<ContextMenuComponent target="#target" items={menuItems} />

---

显示与动画属性

animationSettings

类型： MenuAnimationSettingsModel

配置菜单打开/关闭时的动画效果。

属性：

• effect：动画类型（None、SlideDown、ZoomIn、FadeIn）
• duration：动画时长，单位为毫秒（默认值：400）
• easing：CSS 缓动函数（默认值：ease）

const animationSettings = {
  effect: 'FadeIn',
  duration: 300,
  easing: 'ease-out'
};

<ContextMenuComponent
  target="#target"
  items={menuItems}
  animationSettings={animationSettings}
/>

可用效果：

效果	描述
None	无动画
SlideDown	从顶部向下滑动
ZoomIn	放大效果
FadeIn	淡入效果

---

cssClass

类型： string

向 ContextMenu 包装器添加自定义 CSS 类，以便自定义样式。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  cssClass="custom-menu dark-theme"
/>

---

enableScrolling

类型： boolean（默认值：false）

当菜单高度超出可用空间时启用滚动。

<ContextMenuComponent
  target="#target"
  items={largeMenuList}
  enableScrolling={true}
/>

---

交互属性

filter

类型： string

用于指定目标元素内部哪些元素应触发上下文菜单的 CSS 选择器。可用它将上下文菜单限制在某些子元素上。

// Context menu only appears on table rows, not the entire table
<ContextMenuComponent
  target="#table"
  filter="tr"
  items={menuItems}
/>

---

hoverDelay

类型： number（默认值：400）

悬停后显示子菜单前的等待时间，单位为毫秒。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  hoverDelay={500}  // 500ms before submenu appears
/>

---

showItemOnClick

类型： boolean（默认值：false）

强制子菜单仅通过单击打开（而非悬停）。设为 true 时，需要使用方向键导航来打开子菜单。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  showItemOnClick={true}  // Submenus open on click only
/>

---

数据与内容属性

itemTemplate

类型： string | Function

菜单项的自定义 HTML 模板。使用带有属性占位符（${propertyName}）的模板字符串。

const template = `
  <div class="menu-item">
    <span class="${iconCss}"></span>
    <span>${text}</span>
    <span class="shortcut">${shortcut}</span>
  </div>
`;

<ContextMenuComponent
  target="#target"
  items={menuItems}
  itemTemplate={template}
/>

---

locale

类型： string（默认值：'en-US'）

设置组件的本地化语言。此设置会覆盖全局区域性设置。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  locale="es-ES"  // Spanish localization
/>

---

安全与状态属性

enableHtmlSanitizer

类型： boolean（默认值：true）

启用 HTML 清理以防止 XSS 攻击。清理菜单项中不受信任的 HTML。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableHtmlSanitizer={true}  // Sanitize HTML content
/>

---

enablePersistence

类型： boolean（默认值：false）

使用浏览器存储在页面重新加载后保留组件状态（展开/折叠状态）。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enablePersistence={true}
/>

---

enableRtl

类型： boolean（默认值：false）

为阿拉伯语、希伯来语及其他 RTL 语言启用从右到左（RTL）布局。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableRtl={true}
/>

---

菜单项模型属性

每个菜单项都使用 MenuItemModel 接口进行配置，包含以下属性：

文本与显示

text

类型： string

菜单项的显示文本。

{ text: 'Cut' }
{ text: 'Copy' }

---

id

类型： string

菜单项的唯一标识符。可用于在事件处理程序或程序化操作中识别菜单项。

{ id: 'cut-item', text: 'Cut' }
{ id: 'copy-item', text: 'Copy' }

---

iconCss

类型： string

用于显示图标的 CSS 类。支持 Syncfusion 图标或自定义图标类。

{ text: 'Cut', iconCss: 'e-icons e-cut' }
{ text: 'Copy', iconCss: 'e-icons e-copy' }
{ text: 'Delete', iconCss: 'e-icons e-delete' }

---

菜单项结构

items

类型： MenuItemModel[]

嵌套的子菜单项。用于创建分层菜单结构。

{
  text: 'File',
  items: [
    { text: 'New' },
    { text: 'Open' },
    { text: 'Save' }
  ]
}

---

separator

类型： boolean（默认值：false）

将其渲染为视觉分隔线，而非可点击的菜单项。

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { separator: true },  // Visual divider
  { text: 'Delete' }
];

---

导航

url

类型： string

导航 URL。会创建一个锚点链接，点击后进行跳转。

{ text: 'Visit Site', url: 'https://example.com' }
{ text: 'Documentation', url: '/docs' }

---

自定义属性

htmlAttributes

类型： Record<string, string>

为菜单项元素添加自定义 HTML 属性。

{
  text: 'Download',
  htmlAttributes: {
    'data-action': 'download',
    'aria-label': 'Download file',
    'title': 'Download the file'
  }
}

---

菜单方法 – 程序化控制

ContextMenu 提供 15 种以上方法，用于运行时控制和操作：

菜单状态控制

open(top: number, left: number, target?: HTMLElement): void

在指定坐标处以程序化方式打开上下文菜单。

参数：

• top：垂直位置（以像素为单位的 Y 坐标）
• left：水平位置（以像素为单位的 X 坐标）
• target：可选的 HTML 元素，用于计算 z-index

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const openMenuAtClick = (event: React.MouseEvent) => {
    menuRef.current?.open(event.clientY, event.clientX);
  };

  return (
    <div>
      <button onClick={openMenuAtClick}>Open Menu</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

---

close(): void

以程序化方式关闭上下文菜单。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const closeMenu = () => {
    menuRef.current?.close();
  };

  const handleItemSelect = (args: MenuEventArgs) => {
    console.log('Selected:', args.item?.text);
    closeMenu();  // Close menu after selection
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      select={handleItemSelect}
    />
  );
}

---

菜单项可见性控制

showItems(items: string[], isUniqueId?: boolean): void

显示此前隐藏的菜单项。

参数：

• items：要显示的菜单项文本或 ID 数组
• isUniqueId：若为 true，则将菜单项视为唯一 ID；若为 false，则将其视为文本（默认值：false）

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const showDeleteOption = () => {
    menuRef.current?.showItems(['Delete', 'Rename']);
  };

  return (
    <div>
      <button onClick={showDeleteOption}>Show Options</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

---

hideItems(items: string[], isUniqueId?: boolean): void

隐藏指定菜单项，但仍将其保留在菜单结构中。

参数：

• items：要隐藏的菜单项文本或 ID 数组
• isUniqueId：若为 true，则将菜单项视为唯一 ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    // Hide delete option for read-only mode
    if (isReadOnly) {
      menuRef.current?.hideItems(['Delete', 'Modify']);
    }
  }, [isReadOnly]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

---

菜单项状态管理

enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void

启用或禁用菜单项，以控制其交互性。

参数：

• items：要修改的菜单项文本或 ID 数组
• enable：为 true 时启用，为 false 时禁用
• isUniqueId：若为 true，则将菜单项视为唯一 ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const disablePasteIfNoClipboard = async () => {
    const canPaste = await navigator.permissions.query({ name: 'clipboard-read' });
    if (canPaste.state === 'denied') {
      menuRef.current?.enableItems(['Paste'], false);
    }
  };

  React.useEffect(() => {
    disablePasteIfNoClipboard();
  }, []);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      beforeOpen={disablePasteIfNoClipboard}
    />
  );
}

---

菜单项操作

insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

在指定目标菜单项之后插入新的菜单项。

参数：

• items：要插入的新 MenuItemModel 项目数组
• text：目标菜单项的文本或 ID，新项目将插入其后
• isUniqueId：若为 true，则将 text 视为唯一 ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addSortByOption = () => {
    const newItems: MenuItemModel[] = [
      { text: 'Sort By Name' },
      { text: 'Sort By Date' }
    ];
    menuRef.current?.insertAfter(newItems, 'View');
  };

  return (
    <div>
      <button onClick={addSortByOption}>Add Sort Options</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

---

insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

在指定目标菜单项之前插入新的菜单项。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addPremiumOptions = () => {
    const premiumItems: MenuItemModel[] = [
      { text: 'Premium Feature 1' },
      { text: 'Premium Feature 2', iconCss: 'e-icons e-star' }
    ];
    // Insert before 'Delete' option
    menuRef.current?.insertBefore(premiumItems, 'Delete');
  };

  React.useEffect(() => {
    if (user.isPremium) {
      addPremiumOptions();
    }
  }, [user.isPremium]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

---

removeItems(items: string[], isUniqueId?: boolean): void

从菜单中移除菜单项。

参数：

• items：要移除的菜单项文本或 ID 数组
• isUniqueId：若为 true，则将菜单项视为唯一 ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const removeRestrictedActions = () => {
    menuRef.current?.removeItems(['Delete', 'Export', 'Archive']);
  };

  React.useEffect(() => {
    if (userRole === 'viewer') {
      removeRestrictedActions();
    }
  }, [userRole]);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={removeRestrictedActions}
    />
  );
}

---

菜单项查询

getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]

获取菜单项的索引。返回数组是因为菜单项可能存在于多个层级（适用于嵌套菜单项）。

参数：

• item：要查找的 MenuItem 对象或文本/ID 字符串
• isUniqueId：若为 true，则将菜单项视为唯一 ID

返回值： number[] - 表示菜单项位置的索引数组

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const findItemPosition = () => {
    const indices = menuRef.current?.getItemIndex('Copy');
    console.log('Copy is at index:', indices);  // Output: [1] or [0, 1] for nested
    
    const nestedIndices = menuRef.current?.getItemIndex('Open', false);
    console.log('Open is at indices:', nestedIndices);  // Output: [0, 1] for nested
  };

  return (
    <div>
      <button onClick={findItemPosition}>Find Item</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

---

setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void

更新现有菜单项的属性。

参数：

• item：包含更新后属性的 MenuItem 对象
• id：要更新的菜单项文本或 ID
• isUniqueId：若为 true，则将 id 视为唯一 ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const updateDeleteItemStyle = () => {
    const updatedItem: MenuItemModel = {
      text: 'Delete',
      iconCss: 'e-icons e-delete',
      htmlAttributes: {
        'class': 'dangerous-action'
      }
    };
    menuRef.current?.setItem(updatedItem, 'Delete');
  };

  return (
    <div>
      <button onClick={updateDeleteItemStyle}>Update Delete Item</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

---

组件生命周期

destroy(): void

销毁 ContextMenu 组件并释放资源。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    return () => {
      // Cleanup on component unmount
      menuRef.current?.destroy();
    };
  }, []);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

---

事件与事件参数

ContextMenu 组件提供 7 个事件，用于监控和控制用户交互：

菜单生命周期事件

beforeOpen

类型： EmitType<BeforeOpenCloseMenuEventArgs>

在菜单打开之前触发。可用于阻止菜单打开、修改菜单项或准备数据。

事件参数：

interface BeforeOpenCloseMenuEventArgs {
  element: HTMLElement;           // Menu element
  event: Event;                    // Browser event object
  items: MenuItemModel[];          // Current menu items
  cancel: boolean;                 // Set to true to prevent action
  parentItem?: MenuItemModel;      // Parent item if submenu
}

示例：在特定条件下阻止打开

function App() {
  const handleBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
    // Prevent opening on read-only elements
    const target = args.event?.target as HTMLElement;
    if (target?.classList.contains('read-only')) {
      args.cancel = true;  // Prevent menu from opening
      return;
    }

    // Modify items before opening
    const selectedText = window.getSelection()?.toString();
    if (!selectedText) {
      // Disable text-related operations if no text selected
      args.items = args.items?.map(item => ({
        ...item,
        disabled: ['Copy', 'Cut'].includes(item.text as string)
      }));
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeOpen={handleBeforeOpen}
    />
  );
}

---

onOpen

类型： EmitType<OpenCloseMenuEventArgs>

在菜单打开之后触发。可用于初始化 UI 或执行打开后的操作。

事件参数：

interface OpenCloseMenuEventArgs {
  element: HTMLElement;           // Menu element
  event: Event;                    // Browser event that triggered opening
  items: MenuItemModel[];          // Current menu items
}

示例：打开后进行初始化

function App() {
  const handleOnOpen = (args: OpenCloseMenuEventArgs) => {
    console.log('Menu opened at:', new Date());
    console.log('Number of items:', args.items?.length);
    
    // Set focus to first menu item for accessibility
    setTimeout(() => {
      const firstItem = args.element?.querySelector('.e-menu-item');
      (firstItem as HTMLElement)?.focus();
    }, 0);
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onOpen={handleOnOpen}
    />
  );
}

---

beforeClose

类型： EmitType<BeforeOpenCloseMenuEventArgs>

在菜单关闭之前触发。可用于阻止菜单关闭或保存状态。

示例：存在未保存的更改时阻止关闭

function App() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);

  const handleBeforeClose = (args: BeforeOpenCloseMenuEventArgs) => {
    if (hasUnsavedChanges) {
      const confirmed = window.confirm('Unsaved changes. Close anyway?');
      if (!confirmed) {
        args.cancel = true;  // Prevent menu from closing
      }
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeClose={handleBeforeClose}
    />
  );
}

---

onClose

类型： EmitType<OpenCloseMenuEventArgs>

在菜单关闭之后触发。可用于清理或管理状态。

示例：菜单关闭后进行清理

function App() {
  const handleOnClose = (args: OpenCloseMenuEventArgs) => {
    console.log('Menu closed');
    
    // Clear temporary selections or states
    document.querySelectorAll('.temp-highlight').forEach(el => {
      el.classList.remove('temp-highlight');
    });
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onClose={handleOnClose}
    />
  );
}

---

菜单项交互事件

select

类型： EmitType<MenuEventArgs>

单击/选择菜单项时触发。可用于根据选择执行操作。

事件参数：

interface MenuEventArgs {
  element: HTMLElement;           // Menu item element
  event: Event;                    // Click/keyboard event
  item?: MenuItemModel;            // Selected menu item
  items?: MenuItemModel[];         // All menu items
}

示例：选择菜单项时执行操作

function App() {
  const handleSelect = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    switch (itemText) {
      case 'Cut':
        document.execCommand('cut');
        console.log('Cut executed');
        break;
      case 'Copy':
        document.execCommand('copy');
        console.log('Copy executed');
        break;
      case 'Paste':
        document.execCommand('paste');
        console.log('Paste executed');
        break;
      case 'Delete':
        if (confirm('Confirm delete?')) {
          console.log('Delete executed');
        }
        break;
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      select={handleSelect}
    />
  );
}

---

beforeItemRender

类型： EmitType<MenuEventArgs>

每个菜单项渲染之前触发。可用于自定义菜单项外观或添加自定义逻辑。

示例：有条件地禁用菜单项

function App() {
  const handleBeforeItemRender = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    // Disable delete if user doesn't have permission
    if (itemText === 'Delete' && !userPermissions.canDelete) {
      args.element?.classList.add('e-disabled');
    }

    // Highlight recent items
    if (itemText?.startsWith('Recent:')) {
      args.element?.classList.add('recent-item-highlight');
    }

    // Add keyboard shortcut indicator
    const shortcuts: Record<string, string> = {
      'Cut': 'Ctrl+X',
      'Copy': 'Ctrl+C',
      'Paste': 'Ctrl+V'
    };

    if (shortcuts[itemText as string]) {
      const shortcutEl = document.createElement('span');
      shortcutEl.className = 'shortcut-hint';
      shortcutEl.textContent = shortcuts[itemText as string];
      args.element?.appendChild(shortcutEl);
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeItemRender={handleBeforeItemRender}
    />
  );
}

---

组件生命周期

created

类型： EmitType<Event>

组件完全创建并渲染后触发。可用于初始化。

示例：创建后进行初始化

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const handleCreated = () => {
    console.log('ContextMenu created and ready');
    
    // Perform initial setup
    menuRef.current?.enableItems(['Advanced Options'], userRole === 'admin');
    
    // Add custom data to items
    const items = menuRef.current?.items;
    if (items) {
      items.forEach((item, index) => {
        item.id = `item-${index}`;
      });
    }
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={handleCreated}
    />
  );
}

---

菜单项与数据绑定

📄 阅读： references/menu-items-and-data-binding.md

• 使用 MenuItemModel 创建菜单项
• 使用 items 属性
• 绑定本地数据源
• 根据数组动态生成菜单项
• 配置嵌套子菜单

---

模板与自定义

📄 阅读： references/templates-and-customization.md

• 自定义菜单项模板（itemTemplate）
• 在菜单项中呈现丰富内容
• 使用 beforeItemRender 事件自定义菜单项
• 为菜单项添加图标和元数据
• 条件渲染

---

样式与外观

📄 阅读： references/styling-and-appearance.md

• 自定义 CSS 类
• 集成 Theme Studio
• 覆盖菜单元素的自定义 CSS
• 图标样式和定位
• 视觉状态（悬停、已选中、已禁用）

---

无障碍与键盘导航

📄 阅读： references/accessibility-and-keyboard-navigation.md

• 符合 WCAG 2.2 和 Section 508 标准
• 屏幕阅读器支持和 ARIA 属性
• 键盘快捷键（Esc、Enter、方向键）
• 从右向左（RTL）支持
• 焦点管理

---

高级功能

📄 阅读： references/advanced-features.md

• 可滚动的上下文菜单
• 动画设置和效果
• 菜单打开类型和定位
• 溢出处理和动态布局
• 复杂场景的配置

---

用例与模式

📄 阅读： references/use-cases-and-patterns.md

• 常见的上下文菜单模式
• 动态添加/移除/启用/禁用菜单项
• 在菜单项之间呈现分隔符
• 多级嵌套示例
• 真实场景的集成案例

---

快速参考

基本代码模板

import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const menuItems: MenuItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut', id: 'cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', id: 'copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', id: 'paste' },
    { separator: true },
    {
      text: 'More',
      items: [
        { text: 'Delete' },
        { text: 'Properties' }
      ]
    }
  ];

  const handleSelect = (args: any) => {
    console.log('Selected:', args.item?.text);
  };

  const handleBeforeOpen = (args: any) => {
    // Customize menu before opening
  };

  return (
    <div>
      <div id="target">Right-click me</div>
      <ContextMenuComponent
        ref={menuRef}
        target="#target"
        items={menuItems}
        select={handleSelect}
        beforeOpen={handleBeforeOpen}
        animationSettings={{ effect: 'FadeIn', duration: 300 }}
        enableScrolling={true}
      />
    </div>
  );
}

export default App;

常用方法参考

// Open menu at coordinates
menuRef.current?.open(100, 150);

// Close menu
menuRef.current?.close();

// Enable/disable items
menuRef.current?.enableItems(['Delete', 'Archive'], false);

// Show/hide items
menuRef.current?.showItems(['Delete']);
menuRef.current?.hideItems(['Export']);

// Add items
menuRef.current?.insertAfter(
  [{ text: 'New Option' }],
  'Existing Item'
);

// Remove items
menuRef.current?.removeItems(['Outdated Item']);

// Get item index
const indices = menuRef.current?.getItemIndex('Copy');

---

后续步骤： 根据需求选择参考文档。可从 getting-started.md 开始，或查阅其他参考文档中的特定功能。