React实现优雅的弹窗
实现弹窗的原理关键在于,如何将弹窗组件挂载到任意的dom上,参考weui.js,提供了思路,可以通过append将元素添加到指定的父节点上,来实现弹窗的显示,隐藏的时候在移除该元素即可,如下示例:
参考:https://github.com/Tencent/weui.js/blob/master/src/picker/picker.js
在react同样可以使用该思路来实现,弹窗的显示和隐藏。但是在react中一般不这么搞,因为react已经提供了相关的API来实现,分别是unstable_renderSubtreeIntoContainer和Portal组件,其中unstable_renderSubtreeIntoContainer已经过去,被Portal替代,原因是unstable_renderSubtreeIntoContainer使用起来麻烦,而且换不稳定,主要表现在以下两点:
1、需要自己管理组件的生命周期,用React.render()渲染到某个DOM节点,如果要卸载的话需要手动执行unmountComponentAtNode()
2、接受不到Context的值。用render()渲染的组件是无法获取到上级节点的Context值的。比如多语言机制实现。
下面主要介绍Portals的两种弹窗的用法:
一、静态弹窗
静态弹窗是初始化渲染的时候要加载的内容已经被渲染到指定的节点里面,隐藏和显示通过变量控制。
1、dialog
import React, {useEffect, useState} from 'react';
import ReactDOM from 'react-dom'export default function Dialog(props) {const [node, setNode] = useState();useEffect(() => {const element = document.createElement('div');document.body.appendChild(element);setNode(element);return () => {document.body.removeChild(element);};}, []);return node ? ReactDOM.createPortal(props.children, node) : null;
}
2、App
import React, {useState} from 'react'
import Dialog from "./dialog";export default function App() {const [show, isShow] = useState(false)return (<div><button onClick={() => {isShow(show=> !show)}}>点击显示</button>{show && <Dialog><div>我是一个简答的弹窗</div></Dialog>}</div>);
}
二、动态弹窗
动态弹窗是初始化渲染的时候要加载的内容没有被渲染到指定的节点里面,需要显示的时候再加载,隐藏和显示单独控制。
1、dialog同上
2、App
import React from 'react'
import ReactDOM from 'react-dom'
import Dialog from "./dialog";export default function App() {const div = document.createElement('div');return (<div><button onClick={() => {ReactDOM.render(<Dialog>我是一个弹窗</Dialog>,div);}}>点击显示</button><button onClick={() => {const unmountResult = ReactDOM.unmountComponentAtNode(div);if (unmountResult && div.parentNode) {div.parentNode.removeChild(div);}}}>点击隐藏</button></div>);
}
三、效果图
参考文档:
https://zhuanlan.zhihu.com/p/52016989
https://react.docschina.org/docs/portals.html
React实现优雅的弹窗相关推荐
- 设计灵感|有趣优雅的弹窗消息设计!
弹窗提示中通常用"√"和"×"来提示用户的操作是正确还是错误,虽然几乎每个人都知道这些符号代表的含义,但当符号结合了情感化的图形以及积极或消极的色彩,所传达给用 ...
- boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现 动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
- React事件优雅绑定
2018-01-11 19:00 更新(目前最优解) 收到 光 同学的提醒,与其让ESLint报错,不如在调用时候做一些修改,上代码,就是在调用事件的时候,重新用箭头函数再包裹一层,拍脑袋表示为啥自己 ...
- Android优雅实现弹窗优先级管理
前言 在日常的android开发中,我们或多或少都有做过应用内的一些弹窗,比如在应用的某些页面弹窗展示广告,弹窗通知消息等.你的app中使用弹窗是否比较频繁?你是否厌烦了每次敲击一大堆代码就为了展示一 ...
- 把这304道React的面试题刷完,前端面试没有在怕的!
Core React 什么是 React? React 是一个开源前端 JavaScript 库,用于构建用户界面,尤其是单页应用程序.它用于处理网页和移动应用程序的视图层.React 是由 Face ...
- React 面试题 回答
原文https://github.com/semlinker/reactjs-interview-questions 本项目的面试题来源于 sudheerj/reactjs-interview-que ...
- React+Redux技术栈核心要点解析(下篇)
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
- React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
- 用typescript完成倒计时_「干货」将数十万行CoffeeScript代码迁移到TypeScript
作者 | David Goldstein 译者 | 王强 策划 | 小智 转发链接:https://mp.weixin.qq.com/s/TK7kWXX4hR3e-jtpVMuBnw 序言 2017 ...
最新文章
- maven的pom.xml用<exclusion>解决版本问题
- python 创建netcdf_python读取与处理netcdf数据方式
- [BZOJ3874/AHOI2014]宅男计划
- html 圆球的百分比,HTML5 很酷的球形器皿中水波状的进度条
- SpringBoot RequestBody ajax提交对象
- 阿里云 服务器 系统 php mysql_阿里云服务器配环境(Ubuntu 16.04+Nginx+MySQL+PHP)并部署hexo博客...
- JAVA实现求五个数阶乘之和 小实例
- python做var模型_python中VAR模型的条件预测
- php微信h5支付对接流程,微信H5支付接口开发的流程与常见问题
- 【132天】尚学堂高淇Java300集视频精华笔记(67-70)
- thoughtworks面试总结
- php 查文件sha1 内存不足,PHP 计算文件的 sha1 散列值
- 联合密度函数求期望_已知概率密度函数怎么求它的数学期望和方差
- win10专业版如何快速恢复出厂设置的方法
- CESM优化——Intel编译器编译安装NetCDF库(C+Fortran)
- 在线python编程网页-手把手教你用Python写一个在线网站,这真的很装逼!
- Julia 安装包报错操作超时
- Python 函数 | zip 函数详解
- 14.刚体组件Rigidbody
- 系统服务(daemons)
热门文章
- 【蓝桥杯 三体攻击】暴力解法多维数组
- mysql入门(笔记有两次整理,可以直接找自己要找的东西)
- windows10强制删除文件_苹果ID永久获取地址; 头条清爽版; 强制删除顽固文件; 某管家加速工具单文件版;以上为本期内容...
- 解决虚拟机下的ubuntu系统插入U盘后选择连接到虚拟机不显示,没反应的问题
- 值得借鉴的新年礼品包装海报设计版式|不俗雅致感
- 一家中高档女鞋店,如何利用资源整合,让他的生意生意异常火爆!
- 安卓设备的网络adb调试设置
- 计算机组装配件选型,小白DIY攒机指南 谈谈组装电脑前的准备以及购买组装配件需要注意的事项...
- Learn Some Framework-1
- 彻底卸载Anaconda 没有Prompt情况下