syncfusion-react-menu

用途

Syncfusion React Menu 是一个灵活、功能丰富的导航控件，用于创建具有层级结构的菜单。它可用于构建导航栏、下拉菜单、上下文菜单、移动端响应式菜单以及复杂的多级导航系统。

主要能力

• 支持无限层级嵌套的层级菜单
• 支持绑定到层级或自引用的 JSON 数据
• 支持图标和分隔符，便于视觉组织
• 提供点击、打开、关闭、渲染等交互事件系统
• 支持可配置时长与缓动效果的动画
• 支持键盘导航并符合 WCAG 无障碍标准
• 支持 RTL（从右到左）语言
• 支持水平与垂直滚动，适应大型菜单
• 菜单项状态管理：动态添加、移除、启用/禁用、显示/隐藏
• 汉堡包模式，适配移动端响应式菜单
• 状态持久化，可在页面重新加载后保存和恢复菜单状态
• HTML 净化以增强安全性
• 可控制子菜单悬停延迟
• 支持自定义 CSS 类，便于灵活样式定制

使用方式

通过 npm 包 @syncfusion/ej2-react-navigations 引入 MenuComponent 和 MenuItemModel，以 items 属性传入菜单项数组即可渲染。菜单项支持 text、items（子菜单）、separator 等字段。

快速开始示例：

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

function App() {
  const menuItems: MenuItemModel[] = [
    {
      text: 'File',
      items: [
        { text: 'New' },
        { text: 'Open' },
        { text: 'Save' }
      ]
    },
    {
      text: 'Edit',
      items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
      ]
    }
  ];

  return (
    <MenuComponent items={menuItems}></MenuComponent>
  );
}

export default App;

关键属性

属性	类型	默认值	用途
items	MenuItemModel[]	[]	要渲染的菜单项
fields	FieldSettingsModel	-	数据字段映射
hamburgerMode	boolean	false	启用移动端汉堡包视图
enableScrolling	boolean	true	允许大型菜单滚动
enablePersistence	boolean	false	跨会话保存状态
enableRtl	boolean	false	从右到左文本支持
orientation	Orientation	Horizontal	布局方向
animationSettings	MenuAnimationSettings	-	动画配置
hoverDelay	number	400	子菜单悬停延迟（毫秒）
showItemOnClick	boolean	false	仅在点击时显示菜单项
enableHtmlSanitizer	boolean	true	净化 HTML 内容
cssClass	string	-	自定义 CSS 类
locale	string	'en-US'	文化/语言设置
target	string	-	汉堡包模式的元素选择器
title	string	-	汉堡包模式标题文本

关键方法

方法	参数	用途
insertBefore()	item, selector	在菜单项之前插入
insertAfter()	item, selector	在菜单项之后插入
removeItems()	selectors	按选择器移除菜单项
enableItems()	selectors, enable	启用/禁用菜单项
showItems()	selectors	显示隐藏的菜单项
hideItems()	selectors	隐藏可见的菜单项
setItem()	item, selector	更新菜单项属性
getItemIndex()	selector	获取菜单项索引
open()	-	打开汉堡包菜单
close()	-	关闭汉堡包菜单
destroy()	-	清理组件

关键事件

事件	触发时机	参数类型
select	菜单项被点击	MenuEventArgs
beforeOpen	子菜单打开前	BeforeOpenCloseMenuEventArgs
beforeClose	子菜单关闭前	BeforeOpenCloseMenuEventArgs
onOpen	子菜单打开后	OpenCloseMenuEventArgs
onClose	子菜单关闭后	OpenCloseMenuEventArgs
beforeItemRender	菜单项渲染前	BeforeItemRenderEventArgs
created	组件初始化完成	Object

常见模式

响应菜单项选择：

const handleMenuSelect = (args) => {
  console.log(`Selected: ${args.item.text}`);
};

<MenuComponent items={menuItems} select={handleMenuSelect}></MenuComponent>

动态添加菜单项：

let menuObj: MenuComponent;

const addMenuItem = () => {
  menuObj.insertAfter([{ text: 'New Item' }], 'File');
};

<MenuComponent ref={(menu) => (menuObj = menu)} items={menuItems}></MenuComponent>

禁用菜单项：

const handleBeforeOpen = (args) => {
  if (args.item.text === 'Save') {
    args.item.disabled = true;
  }
};

<MenuComponent items={menuItems} beforeOpen={handleBeforeOpen}></MenuComponent>

适用场景

• 构建导航菜单：文件菜单、应用菜单、主导航栏
• 下拉菜单：用户操作菜单、上下文相关选项
• 子菜单系统：多级层级导航
• 汉堡包/移动端菜单：移动设备响应式菜单
• 菜单定制：添加/移除菜单项、图标、分隔符、自定义样式
• 事件处理：检测菜单项点击、打开/关闭事件、菜单项状态变化
• 数据驱动菜单：将菜单绑定到 JSON 数据结构
• 菜单项状态管理：启用/禁用、显示/隐藏、更新菜单项
• 无障碍：创建键盘可导航、屏幕阅读器友好的菜单
• RTL 支持：从右到左语言菜单
• 可滚动菜单：具有水平/垂直滚动的大型菜单
• 持久化：在页面重新加载后保存菜单状态

限制

资料中未提供关于收费、价格、平台限制或性能上限的具体说明。