如何在 React JS 中创建弹出框

弹出框，也常被称为模态框或对话框，是常见的 UI 元素，用于在主页面上方显示额外的内容或交互。在 React 中创建弹出框可以通过多种方式实现，包括使用第三方库或自定义编写代码。在本文中，我们将使用 reactjs-popup 库 来在 React JS 中创建弹出框。

前置条件：

• NPM & Node.js
• React JS

实现思路：

为了在 React 中创建弹出框，我们将首先安装 reactjs-popup 库。然后，我们需要导入该库中的 Popup 组件，并将弹出框的内容包裹在 Popup 组件内，同时配置所需的属性。

创建 React 应用并安装模块的步骤：

第一步： 使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第二步： 创建项目文件夹（即 foldername）后，使用以下命令进入该目录：

cd foldername

第三步： 创建 ReactJS 应用后，使用以下命令安装所需的模块：

npm i reactjs-popup

项目结构：

!image

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "reactjs-popup": "^2.0.6",
        "web-vitals": "^2.1.4"
},

示例 1： 本示例使用 reactjs-popup 库在应用的主页上添加一个弹出框。

JavaScript


CODEBLOCK_3bb41b61

运行应用程序的步骤： 在终端中运行以下命令以启动应用。

npm start

输出：
示例 2： 本示例使用 reactjs-popup 库创建一个模态框，点击按钮时显示，并以相同的方式关闭。

JavaScript


CODEBLOCK_6b28b18f

运行应用程序的步骤：

npm start

输出：