创建 React 上下文菜单

如果在访问网站时右键单击浏览器，则可以看到操作系统的本机上下文菜单。从那里，您可以保存、打印、为页面创建二维码等等。如果突出显示文本，则可以看到复制、粘贴和剪切等选项。您还可以在电子邮件或列表应用程序以及协作应用程序（如 Trello 和 Nottion）上看到自定义的上下文菜单。这些右键单击菜单（也称为上下文菜单）在用户使用应用时为用户提供了更多选项。

这篇文章将探讨如何创建一个 React 上下文菜单，激活右键菜单的快捷方式，以及如何创建自定义上下文菜单 Hook。

您可以在下面查看项目演示，并在 GitHub 或已部署的网站上查看完整的代码。

什么是 React 上下文菜单？

上下文菜单（也称为右键单击菜单）是在用户交互（如右键单击鼠标操作）上显示的图形用户界面 （GUI） 菜单。如何在Android上录制WhatsApp视频和语音通话？上下文菜单提供一组有限的选项，这些选项在菜单所属的操作系统或应用程序的当前状态或上下文中可用。

开始使用我们的 React 项目

要开始在 React 中创建自定义右键单击菜单，我们将使用该命令初始化一个 React 项目，然后使用命令进入项目文件夹。在本教程中，我们将使用样式化组件进行样式设置：npx create-react-app react-context-menu``cd react-context-menu

项目和文件夹结构

在我们的文件中，我们将创建四个文件夹：src

• components：这将容纳我们将在整个项目中使用的所有组件

• data：这将存储将在网页上呈现的数据信息

• hooks：这是我们将为右键单击上下文菜单创建钩子的地方

• styles：此文件夹将包含我们所有样式的文件

如何禁用右键单击上下文菜单

如果您转到Chrome或Mozilla浏览器并右键单击任意位置，您将看到默认的浏览器上下文菜单，如下所示：

我们将使用 prop 在我们的文件中禁用如何在 Windows 11 上解压缩 .tar.gz、.tgz、.gz 文件？分享6种方法此默认行为。它将看起来像这样：onContextMenu``App.js

src/App.js
​
 import "./App.css";
function App() {
  return (
    <div
      className="App"
      onContextMenu={(e) => {
        e.preventDefault(); // prevent the default behaviour when right clicked
        console.log("Right Click");
      }}
    >
      Context Menu
      </div>
  );
}
export default App;

现在，让我们看看浏览器中有什么：

如您所见，右键单击浏览器的任何其他部分时，将显示默认菜单，但是右键单击上下文时，它不会显示，并且控制台中会记录文本。

在 React 中创建自定义的右键单击上下文菜单

首先，我们将在文件夹中创建一个文件，并使用我们将用于项目的数据填充该文件：data.js``data

src/data.js
​
export const data = [
  {
    id: 1,
    title: "Message 1",
  },
  {
    id: 2,
    title: "Message 2",
  },
  {
    id: 3,
    title: "Message 3",
  },
  {
    id: 4,
    title: "Message 4",
  },
];

然后，我们将在名为的文件夹中创建一个新组件，并在我们