如何使用 React 创建弹出窗口

已发表: 2022-06-29

向网站添加某些元素会产生相当大的变化。如果您遵循正确的步骤，您可以从竞争对手中脱颖而出并轻松吸引访问者的注意力。

为了增加销售转化率并与访问者互动，您可以从弹出窗口中受益！弹出窗口非常适合就重大问题与特定受众联系。如果您有要发布的公告或要推广的产品，弹出窗口会为您服务。

创建弹出窗口有许多不同的解决方案。在为您的网站形成弹出窗口时，您可以使用不同的编程语言和代码。只要有一点耐心和研究，您就可以使用 React 自己创建它们。

在这篇博文中，我们解释了React 弹出窗口是什么以及如何为您的网站创建React 弹出窗口。

让我们开始！

如何创建一个反应弹出窗口

什么是反应弹出窗口？

React 是一个用于构建用户界面的开源 JavaScript 库。它是 Meta 为 UI 组件创建的免费使用工具。它通过开发人员工具和模板设计使 JS 编码更具功能性。

此外，React 是一个功能强大且易于采用的库，您可以在您的网站上使用它。 React 是用于创建弹出窗口和模式的强大工具。它易于使用且用途广泛，使其成为许多应用的绝佳选择。

React 弹出窗口有很多好处，包括：

轻松创建和自定义弹出窗口。
创建响应式的React 弹出模式。
构建在不同设备上看起来很棒的弹出窗口。

如何创建一个反应弹出窗口？

反应弹出窗口创建

使用 React 创建弹出窗口有多种方法。我们将向您展示如何创建可自定义的 React 弹出窗口。您可以通过查看这些解决方案为您的网站创建自己的弹出窗口。

React 允许用户构建可重用的组件，因此创建弹出组件变得更加容易。例如，要使用 React JS 创建模式，您可以将“模式”属性添加到弹出组件。

使用触发器创建一个简单的弹出窗口并对其进行自定义

在安装必要的组件时，使用 reactjs-popup 创建 React 弹出窗口非常实用。使用 npm 和 yarn 安装 reactjs-popup 后，您可以添加弹出窗口所需的元素。

您可以通过添加不同的功能来自定义先前创建的模式。例如，您可以向您的网站添加如下所示的代码：

 import React from 'react';import Popup from 'reactjs-popup'; export default () => ( <Popup trigger={<button className="button"> Open Modal </button>} modal nested > {close => ( <div className="modal"> <button className="close" onClick={close}> &times; </button> <div className="header"> Modal Title </div> <div className="content"> {' '} Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum. Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos? <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae? </div> <div className="actions"> <Popup trigger={<button className="button"> Trigger </button>} position="top center" nested > <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam doloribus. Odit, aut. </span> </Popup> <button className="button" onClick={() => { console.log('modal closed '); close(); }} > close modal </button> </div> </div> )} </Popup>);

连同此代码，添加下面的代码可让您调整弹出窗口的详细信息。例如，可以自定义弹出窗口的宽度、字体大小、文本对齐、位置、边距、背景和填充等弹出元素。

 .modal { font-size: 12px;}.modal > .header { width: 100%; border-bottom: 1px solid gray; font-size: 18px; text-align: center; padding: 5px;}.modal > .content { width: 100%; padding: 10px 5px;}.modal > .actions { width: 100%; padding: 10px 5px; margin: auto; text-align: center;}.modal > .close { cursor: pointer; position: absolute; display: block; padding: 2px 5px; line-height: 20px; right: -10px; top: -10px; font-size: 24px; background: #ffffff; border-radius: 18px; border: 1px solid #cfcece;}

将这两个代码添加到您网站的代码注入部分后，您的反应弹出窗口可能如下所示：

自定义反应弹出示例

（资源）

使用 React 创建提示弹出窗口

如果您还想从访问者那里收集信息，提示弹出窗口也很有用。通过提示弹出窗口，您可以根据需要向访问者询问他们的姓名、电子邮件和许多其他信息。

您可以创建表单来收集访问者的数据。此外，收集访问者的反馈是通过提示弹出窗口优化您的网站的好方法。

您可以使用如下所示的代码使用 React 添加提示弹出窗口：

 /** The prompt content component */ class Prompt extends React.Component { constructor(props) { super(props); this.state = { value: this.props.defaultValue }; this.onChange = (e) => this._onChange(e); } componentDidUpdate(prevProps, prevState) { if (prevState.value !== this.state.value) { this.props.onChange(this.state.value); } } _onChange(e) { let value = e.target.value; this.setState({value: value}); } render() { return <input type="text" placeholder={this.props.placeholder} className="mm-popup__input" value={this.state.value} onChange={this.onChange} />; } } /** Prompt plugin */ Popup.registerPlugin('prompt', function (defaultValue, placeholder, callback) { let promptValue = null; let promptChange = function (value) { promptValue = value; }; this.create({ title: 'What\'s your name?', content: <Prompt onChange={promptChange} placeholder={placeholder} value={defaultValue} />, buttons: { left: ['cancel'], right: [{ text: 'Save', key: '⌘+s', className: 'success', action: function () { callback(promptValue); Popup.close(); } }] } }); }); /** Call the plugin */ Popup.plugins().prompt('', 'Type your name', function (value) { Popup.alert('You typed: ' + value); });

当您将此代码添加到网站的正文部分时，它可能如下所示：