react使用模态框_用React创建一个类似介质的模态

react使用模态框

In the context of web applications, a modal is a nifty tool that can present information without forcing the user to navigate from the current webpage. In this article, we venture to

在Web应用程序的上下文中，模态是一种漂亮的工具，可以呈现信息而无需强迫用户从当前网页导航。 在本文中，我们冒险去

1. Create a modal using React.
   使用React创建一个模态。
2. Make the modal look like the delightful modal used by Medium to seek confirmation.
   使模态看起来像Medium用来确认的令人愉快的模态。

什么是模态？ (What is a Modal?)

A modal view is a distinct view that gets shown on the top of a host window. Modals can be used to serve a multitude of use cases ranging from presenting information or errors to blocking a user in the form of an auth-wall or pay-wall.

模式视图是显示在主机窗口顶部的独特视图。 模态可用于服务各种用例，从呈现信息或错误到以身份验证墙或付费墙的形式阻止用户。

Modals are autonomous of the host window or view. This makes a modal an exemplary reusable component. The agenda of this post is to imitate one of the minimal modals used by Medium. Below is an image of the modal that we will attempt to mirror.

模态是宿主窗口或视图的自主项。 这使模态成为示例性的可重用组件。 此职位的议程是模仿Medium使用的最小模式之一。 下面是我们将尝试镜像的模态图像。

第1部分：在React中创建模式 (Part 1: Creating a modal in React)

We start by creating a React application using create-react-app To do so, head over to your terminal or command prompt, navigate to the preferred directory and type

我们首先使用create-react-app创建一个React应用create-react-app为此，转到您的终端或命令提示符，导航到首选目录并输入

npx create-react-app medium-modal-mimic

npx create-react-app medium-modal-mimic

This should create a React project. Open the project with your favourite IDE.

这应该创建一个React项目。 使用您最喜欢的IDE打开项目。

1.1使用主机组件— App.js (1.1 Working with the host component — App.js)

The host component or host window is the entity that will present the modal on itself. Once the application is created, move to src/App.js and remove everything but the top container div. Your App.js should look like below

主机组件或主机窗口是将自己呈现模式的实体。 创建应用程序后，移至src/App.js并除去顶部容器div 。 您的App.js如下所示

Next, move to the App.css and following a similar pattern, remove all the styles other than the App

接下来，移至App.css并遵循类似的模式，删除除App以外的所有样式

Make the following changes to the App class. We have made our host screen to take full-screen height. Anything that goes in this div will be centered because of align-items and justify-content

对App类进行以下更改。 我们已将主机屏幕设为全屏高度。 由于align-items和justify-content ，该div中的所有内容都将居中

Move back to the App.js and add a button in the div like below. Make sure that you see this button at the center of the page.

返回到App.js并在div添加一个按钮，如下所示。 确保在页面中央看到此按钮。

<div className="App">
    
</div>

The visibility of the modal would depend upon a state variable. You will need to use useState hook to create a state variable. This state variable determines the fate of our modal.

模态的可见性将取决于状态变量。 您将需要使用useState钩子来创建状态变量。 这个状态变量决定了我们模态的命运。

Start with importing useState in App.js

从在App.js导入useState开始

import React, {useState} from 'React';

import React, {useState} from 'React';

In the App component, create a state variable. The initial value of the state variable showModal would be set to false as you would not want the modal to show when the page first loads.

在App组件中，创建一个状态变量。 状态变量showModal的初始值将设置为false，因为您不希望在页面首次加载时显示模式。