来个模态kuang_使用 React 制作一个模态框

使用 React 制作一个模态框

模态框是一个常见的组件，下面让我们使用 React 实现一个现代化的模态框吧。

组件设计

模态框想必大家都很熟悉，是工作中常用的组件，可以让我们填写或展示一些信息而不必打开一个新页面。在开始编码之前，我们先来了解一个 React 模态框组件应该如何设计。

React 是一个状态(数据)驱动的前端框架，一个模态框最重要的状态就是打开和关闭，visible，当 visible 为 true 时，模态框打开，反之亦然。

由于 React 所提倡的是一种声明式，组件化的开发体验，每个组件都是状态 => 界面的映射，所以，我们把 visible 做为模态框组件的一个 prop，通过传入 prop 来控制

模态框的显示和隐藏，同时该组件还接受一个 onClose 的 prop，用来关闭模态框。

一个完整的模态框还需要标题和内容，因此，我们还需要一个 header 的 prop 来传递模态框的 header，并把 Modal 组件的 children 作为模态框的内容 content。最后，我们的模态框 Modal 的调用方式是这样的：

import React, { useEffect, useState } from 'react';

import Modal from './components/modal';

function App() {

const [modalVisible, setModalVisible] = useState(true);

const openModal = function() { setModalVisible(true) };

const closeModal = function() { setModalVisible(false) };

return (

Click

来个模态kuang_使用 React 制作一个模态框相关推荐

使用vue+textarea的属性maxlength制作一个文本框字数限制
使用vue加textarea的属性maxlength制作一个文本框字数限制 1.body部分 <div id="app"><div class="tex ...
用css3制作一个搜索框效果
搜索框的形式有多种多样,今天试着用css3做了一个搜索框, html代码如下: <form class="form-wrapper"> <input type ...
D3.js(v3)+react 制作一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖两个 ...
react制作一个照片墙小demo
点击下面的指示灯会变大当前的图片会居于屏幕中间再按一下会变成黄色同时当前指示的照片会翻转到背面是一个综合知识的考察用到了css3的2d和3d转换 // App.js import Rea ...
使用react制作一个app—— 仿美团app
使用到的plugins react-router fetch better-scroll swiper 做得有点粗糙,图片是直接截图下来的~如果介意建议看下一个使用脚手架仿的,这个就不改了,哈哈. g ...
java模态_java – 如何在另一个模态JDialog之上创建一个模态的JDialog
我有一个模式设置对话框是一个JDialog.在这个设置窗口中,我将一些组件(包括一个按钮)放置到另一个模式设置对话框,该对话框也是一个JDialog.我使他们成为JDialogs,因为这是我知道进行模 ...
java jdialog 模态_java – 如何在另一个模态JDialog之上创建一个模态的JDialog
不确定你有什么问题,但这里是一个例子,你可以有多个模态对话框: import java.awt.BorderLayout; import java.awt.Window; import java.aw ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...

来个模态kuang_使用 React 制作一个模态框

来个模态kuang_使用 React 制作一个模态框相关推荐

最新文章

热门文章