如何在 ReactJS 中创建弹出框？

在本文中，我们将学习如何在 ReactJs 中创建 Popup。弹出窗口是一个图形用户界面显示区域，通常是一个小窗口，突然出现在可视界面的前台。

React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要创建我们的 Popup，我们将使用 reactjs-popup 包，因为它功能强大、轻量级且完全可定制。之后，我们将在我们的主页上添加我们的弹出窗口，并带有一个按钮以使用已安装的包触发弹出窗口。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 reactjs-popup 包：

npm i reactjs-popup

项目结构：它看起来像这样。

添加弹出窗口：在此示例中，我们将使用我们安装的包在应用程序的主页上添加弹出窗口。为此，在 App.js 文件中添加以下内容。

Javascript

import React from 'react';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
  
export default function PopupGfg(){
  return(
  

    
Popup - GeeksforGeeks
     Click to open popup } 
     position="right center">
      
GeeksforGeeks
      Click here
    
  
  )
};

说明：在上面的例子中，我们首先从 react-popup 包中导入 Popup 组件。之后，我们使用我们的 Popup 组件添加一个带有按钮的弹出窗口来触发弹出窗口。

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

npm start

输出：