📜  如何在 NextJS 中添加弹出窗口?

📅  最后修改于: 2022-05-13 01:56:34.529000             🧑  作者: Mango

如何在 NextJS 中添加弹出窗口?

在本文中,我们将学习如何在 NextJs 中添加 Popup。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

方法:要在 NextJs 中添加我们的 Popup,我们将使用 reactjs-popup 包。 reactjs-popup 包帮助我们集成不同类型的弹出窗口。所以首先,我们将安装 reactjs-popup 包,然后我们将在我们的主页上添加弹出窗口。

创建 NextJS 应用程序:您可以使用以下命令创建一个新的 NextJs 项目:

npx create-next-app gfg

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

npm i reactjs-popup

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

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

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

NextJs Popup - GeeksforGeeks

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


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

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

npm run dev

输出: