ReactJS UI Ant Design 菜单组件
Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。菜单组件用于显示用于导航目的的通用菜单。我们可以在 ReactJS 中使用以下方法来使用 Ant Design 菜单组件。
菜单道具：
- defaultOpenKeys：用于表示默认打开的子菜单键的数组。
- defaultSelectedKeys：用于表示默认选中菜单项的键的数组。
- expandIcon：用于传递子菜单的自定义展开图标。
- forceSubMenuRender：用于强制渲染子菜单在它变得可见之前进入 DOM。
- inlineCollapsed：用于指定菜单处于内联模式时的折叠状态。
- inlineIndent：用于表示每一级内联菜单项的缩进量，以像素为单位。
- mode：用于表示菜单的类型。
- 多个：用于允许选择多个项目。
- openKeys：用当前打开的子菜单的键来表示数组。
- overflowedIndicator：用于在菜单折叠时传递自定义图标。
- selectable：用于允许选择菜单项。
- selectedKeys：用于表示当前选中菜单项的键的数组。
- style：用于定义根节点的样式。
- subMenuCloseDelay：鼠标离开时隐藏子菜单的延迟时间，单位为秒。
- subMenuOpenDelay：表示鼠标进入时显示子菜单的延迟时间，单位为秒。
- theme：用于定义菜单的颜色主题。
- triggerSubMenuAction：是一个可以触发子菜单打开/关闭的回调函数。
- onClick：当菜单项被点击时调用的回调函数。
- onDeselect：取消选择菜单项时调用的回调函数。
- onOpenChange：子菜单打开或关闭时调用的回调函数。
- onSelect：它是一个回调函数，当一个菜单项被选中时调用。
Menu.Item 道具：
- 危险：用于显示危险风格。
- disabled：用于指示菜单项是否被禁用。
- icon：用于传递菜单项的图标。
- key：用于表示菜单项的唯一ID。
- title：用于设置折叠项的显示标题。
Menu.SubMenu 道具：
- children：用于表示子菜单或子菜单项。
- disabled：用于指示子菜单是否被禁用。
- icon：用于传递子菜单的图标。
- key：用于表示子菜单的唯一ID。
- popupClassName：用于表示子菜单类名。
- popupOffset：用于表示子菜单偏移量。
- title：用于表示子菜单的标题。
- onTitleClick：是子菜单标题被点击时触发的回调函数。
Menu.ItemGroup 道具：
- children：用于表示子菜单项。
- title：用于表示组的标题。
Menu.Divider：用作菜单项之间的分隔线。该组件仅用于垂直弹出菜单或下拉菜单。
创建 React 应用程序并安装模块：
第 1 步：使用以下命令创建一个 React 应用程序：
npx create-react-app foldername第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
cd foldername第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：
npm install antd
项目结构：它将如下所示。
项目结构
示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。
App.js
import React from 'react';
import "antd/dist/antd.css";
import { Menu } from 'antd';
const { SubMenu } = Menu;
export default function App() {
return (
ReactJS Ant-Design Menu Component
);
}运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：
npm start输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：
参考： https://ant.design/components/menu/