如何在 ReactJS 中创建菜单项组件?

react jsjavascript libraryfront end technology更新于 2025/2/7 17:48:17

菜单项组件向用户显示各种菜单选项，用户可以从菜单项组件中选择任何选项。ReactJS 中的菜单项组件类似于 HTML 中的 <select> 元素，或者我们可以说它是一个下拉菜单。

此外，菜单组件包含一个子菜单，用于显示任何菜单项的多个选项。开发人员应该使用 <select> HTML 标签从头开始实现菜单项组件。然而，互联网上许多 React 库都提供了预先设计的菜单项组件。

因此，我们将使用不同的库来构建以下菜单项组件。

使用 Material UI 库创建菜单项组件

安装 Material UI 后，用户可以使用以下命令在应用程序中使用其组件。

npm install @mui/material @emotion/react @emotion/styled

语法

用户可以按照以下语法使用 Material UI 的 MenuItem 和 Menu 组件。

<Menu onClose={handleCloseMenu}  >
   <MenuItem> Item 1</MenuItem>
   <MenuItem> Item 2</MenuItem>
   <MenuItem> Item 3</MenuItem>
</Menu>

在上述语法中，我们将 MenuItem 组件包裹在 Menu 组件中。

示例 1

在下面的示例中，我们从 Material UI 库中导入了 Menu 和 MenuItem 组件。此外，我们创建了"open"变量，并根据其布尔值打开和关闭菜单。当用户点击带有"open menu"文本的 div 时，它会调用 handleOpenMenu() 函数来打开菜单。

此外，我们在 Menu 组件中添加了三个菜单项。每当用户点击任何菜单项时，我们都会调用 handleClose() 函数，该函数将 open 变量设置为 false 值并关闭菜单。

#App.js

import * as React from "react";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";

export default function App() {
   const [selectedElement, setselectedElement] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   function handleOpenMenu() {
      setOpen(true);
   }
   function handleCloseMenu(event) {
      setOpen(false);
      setselectedElement(event.target);
   }
   return (
      <div>
            <h2>
               {" "}
               Creating the menu component using the <i> Material UI </i> library.{" "}
            </h2>
         <div
            style={{
               height: "2rem",
               padding: "5px 10px",
               backgroundColor: "grey",
               width: "7rem",
               margin: "10px 10px 30px 10px",
               fontSize: "1.2rem",
               color: "white",
               borderRadius: "12px",
               cursor: "pointer",
            }}
            onClick={handleOpenMenu}
         >
            Open Menu
         </div>
         <Menu
            id="basic-menu"
            selectedElement={selectedElement}
            open={open}
            onClose={handleCloseMenu}
         >
            <MenuItem onClick={handleCloseMenu}> Item 1 </MenuItem>
            <MenuItem onClick={handleCloseMenu}> Item 2 </MenuItem>
            <MenuItem onClick={handleCloseMenu}> Item 3 </MenuItem>
         </Menu>
      </div>
   );
}

输出

使用 szhsin React 库创建菜单项组件

szhsin 是一个 React 库;用户可以在应用程序中安装以下命令。

npm install @szhsin/react-menu

szhsin 库包含各种类型的菜单组件，例如带有单选按钮、复选框等的菜单。这里，我们将看到 szhsin 库的菜单组件的一些示例。

语法

用户可以按照以下语法使用 szhsin 库在 React JS 中创建菜单项。

<Menu menuButton={<MenuButton>Open menu</MenuButton>} >
   <MenuItem value="Item 1" onClick={handleChange}>
      Menu item 1
   </MenuItem>
   <SubMenu label="Languages">
      // menu items
   </SubMenu>
</Menu>

在上述语法中，我们在 Menu 组件中添加了 MenuItem 组件。此外，我们还在 MenuItem 组件上添加了 onClick 事件。此外，我们还使用了 SubMenu 组件创建了子菜单。

示例 2

在下面的示例中，我们从 szhsin 库中导入了 Menu、MenuItem 和 MenuButton 组件。之后，我们使用 Menu 组件创建了菜单。此外，我们还将 MenuButton 作为 Menu 组件的 prop 传递。

我们在 Menu 组件中添加了多个 MenuItems 组件，这些组件具有不同的值和 HTML 文本。此外，每当用户点击任何组件时，它都会调用 handleClicked() 函数，该函数将点击元素的值设置为"selected"变量。

#App.js

import { Menu, MenuItem, MenuButton } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css";
import { useState } from "react";

export default function App() {
   const [selected, changeSelected] = useState(null);
   
   function handleClicked(event) {
      //changing the selected value
      changeSelected(event.value);
   }
   return (
      <div>
         <h2>
            {" "}
            Creating the menu component using the <i> Szhsin </i> library
            components.{" "}
         </h2>
         <Menu menuButton = {<MenuButton> Open menu </MenuButton>} transition>
            <MenuItem value = "Item 1" onClick = {handleClicked}>
               Menu item 1
            </MenuItem>
            <MenuItem value = "Item 2" onClick = {handleClicked}>
               Menu Item 2
            </MenuItem>
            <MenuItem value = "Item 3" onClick = {handleClicked}>
               Menu Item 3
            </MenuItem>
            <MenuItem value = "Item 4" onClick = {handleClicked}>
               Menu Item 4
            </MenuItem>
         </Menu>
         <div> Selected item from the menu component is {selected}.</div>
      </div>
   );
}

输出

示例 3(创建子菜单)

在下面的示例中，我们还使用了 szhsin 库组件来创建菜单。我们还使用了子菜单组件在菜单中创建了一个子菜单。此外，用户可以观察我们如何通过传递值作为 prop 来为子菜单添加标签。

在输出中，用户可以观察到他们可以打开"语言"和"框架"标签的嵌套子菜单。

import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css";
import { useState } from "react";

export default function App() {
   const [selected, changeSelected] = useState(null);
   function handleChange(event) {
      changeSelected(event.value);
   }
   return (
      <div>
         <h2>
            {" "}
            Creating the menu component using the <i> Szhsin </i> library
            components.{" "}
         </h2>
         <Menu menuButton = {<MenuButton> Open menu </MenuButton>} transition>
            <MenuItem value = "Item 1" onClick = {handleChange}>
               Menu item 1
            </MenuItem>
            <SubMenu label = "Languages">
               <MenuItem value = "reactjs" onClick = {handleChange}>
                  reactjs
               </MenuItem>
               <MenuItem value = "JavaScript" onClick = {handleChange}>
                  JavaScript
               </MenuItem>
               <SubMenu label = "FrameWorks">
                  <MenuItem value = "React JS" onClick = {handleChange}>
                     React Js
                  </MenuItem>
                  <MenuItem value = "Django" onClick = {handleChange}>
                     Django
                  </MenuItem>
                  <MenuItem value = "Svelte" onClick = {handleChange}>
                     Svelt
                  </MenuItem>
               </SubMenu>
            </SubMenu>
         </Menu>
         <div> Selected item from the menu component is {selected}. </div>
      </div>
   );
}