react提示框几秒_react 弹窗modal问题

最新推荐文章于 2023-02-25 13:51:51 发布
最新推荐文章于 2023-02-25 13:51:51 发布
阅读量1k 收藏
点赞数
文章标签： react提示框几秒
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39850699/article/details/111780277
版权

最近写了一个react项目，关于react的modal实现有一些新的收获。

about vue

之前在vue里面实现弹窗是通过Vue.extend来实现弹窗的挂载，在需要弹窗的时候才把弹窗挂载在页面上，当弹窗需要被关闭的时候将弹窗组件从页面元素中卸载即可。这种实现方式，在页面有大量弹窗的时候非常方便，需要的时候才被加载，避免大量弹窗写在页面里面造成卡顿现象。

具体代码如下

about react

在写react的时候，也遇见了同样的情况。最开始 使用antd的modal，通过一个bool值来实现显示与否，写到后面，弹窗嵌套越来越多，层级也比较深。再通过布尔值就有点不太美观。于是寻找类似于vue的解决方案，最终在reactdom的方法中，找到了一个类似实现方法。

ReactDOM.unstable_renderSubtreeIntoContainer()这个方法类似于render方法，都是把组件挂载在页面上，但是不同于render挂载的位置是组件被引用的时候就确定的，这个方法可以自己指定挂载的位置即父组件。我看网上大多人使用这个方法是在modal组件生命钩子里面，来自己控制挂载与卸载，可是如果这样的话，好像跟我想要的方向有些差别，跟上面用布尔值好像没太大差。我把这个方法放在调用弹窗的父组件里面，当父组件对应的事件被触发，再将子组件挂载上去，这样弹窗的挂载与卸载都是在父组件里面控制的，当多层弹窗嵌套的时候，这样用起来非常方便。好啦，大致的代码如下

写到这里，感觉vue跟react的一些非公开的api还是相当好用的，如果有空的话，要多做了解！

weixin_39850699
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react 前后端配合的弹窗提醒弱校验
Thelittlewhale的博客
08-16 761
需求：在原来的【提交】按钮事件基础上增加弹窗弱校验。 // 原提交按钮事件 <Button type="primary" onClick={this.onSubmit} loading={loading}> onSubmit = () => {} //service.js submit(id){ return httpFetch.put(`${config.mdataUrl}/api/suppier/submit?id=${id}`) } 实现思路：后台实现校验逻辑，把.
React结合antd制作可移动的Modal窗口
kitagawa_myouya的博客
03-28 545
【代码】React结合antd制作可移动的Modal窗口。
react-confirm-alert:React组件确认对话框
05-08
React确认警报 React组件确认对话框。 v.1.xx的文档， 入门 使用NPM安装： $ npm install react-confirm-alert --save 选项 const options = { title : 'Title' , message : 'Message' , buttons : [ { label : 'Yes' , onClick : ( ) => alert ( 'Click Yes' ) } , { label : 'No' , onClick : ( ) => alert ( 'Click No' ) } ] , childrenElement : ( ) => < div> , customUI : ( { onClose } )
react-sm.zip_React_Springboot+react_springboot react_springboot
07-14
Springboot 和 react的结合
一个ReactJS灵活的弹出式组件支持动画
08-10
一个ReactJS灵活的弹出式组件，支持动画
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
热门推荐
qq_54753561的博客
12-25 25万+
2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 import export、箭头函数、generator函数、promise let cosnt ......
reactjs：在每个模块下定位提示内容展示，三秒后消失
weixin_43517190的博客
11-30 1465
import React, { Component } from 'react'; import classnames from 'classnames'; import './index.scss'; export class TipPopup extends Component { static propTypes: { content: PropTypes.str...
antd-mobile 多层modal弹框导致mask层显示异常
qq_38427709的博客
12-13 2658
最近用antd-mobile2.30，因为需求需要输入大量信息，因此用到了多层弹窗，然后发现在安卓中多层弹窗正常，但是在ios弹窗中的Modal.alert弹框的mask层无法正常显示 因此看了下它的css属性发现，wrap层存在z-index, translateZ两个属性在两个系统中渲染顺序的问题 .am-modal-wrp { z-index: 999; transform: translateZ(0.2667rem); } z-index在安卓中等级较高，而translateZ在ios中等级较
react+antd实现Modal弹窗拖拽功能
小白的博客
02-25 1118
【代码】react+antd实现Modal弹窗拖拽功能，实测有效。
React弹出框(简易版)
qq_44897151的博客
07-23 3886
没有用到Portal 这里亮点 1、在使用了style样式样式化成标签包裹 2、函数式子组件里写点击事件 3、函数与方法 import React, { Component } from "react"; import { Wrap, Center } from "./style"; // 弹框子组件 const Portal = () => { // 函数组件里创建方法要加const 另外使用不用加this const wrap = (ev) => { ev.stopPro
react-reader_react-reader_EPUB+react_React_reader_javascript_
09-29
一款由 react 所寫的閱讀 epub 電子書的代碼示範.
react.rar_react 前后交互_react 后端交互_react 登录_react 网页设计_网页框架
07-15
用react 实现一个简单的前后端交互的网页，可以实现登录，增删检查
semantic-ui-react-todos.rar_React_captured7ne_semantic_semantic
09-23
官网Semantic-React UI组件使用用例
App_reactnative_reactnative_android_
10-04
蓝牙ble功能，RN代码编写，rn代码逻辑，无写入逻辑，有接收逻辑，自定义协议
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
无头单向非循环链表的实现（SList.c）
最新发布
04-26
无头单向非循环链表的实现（函数定义文件）
react modal封装
06-02
React中的Modal组件可以用于实现弹窗、提示框等功能。下面是一个简单的Modal组件的封装示例： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; const modalRoot = document.getElementById('modal-root'); class Modal extends React.Component { constructor(props) { super(props); this.el = document.createElement('div'); } componentDidMount() { modalRoot.appendChild(this.el); } componentWillUnmount() { modalRoot.removeChild(this.el); } render() { const { children, onClose } = this.props; return ReactDOM.createPortal( <div className="modal"> <div className="modal-content"> {children} <button onClick={onClose}>Close</button> </div> </div>, this.el ); } } export default Modal; ``` 在上述代码中，我们定义了一个名为Modal的组件，并使用ReactDOM.createPortal方法将其渲染到modalRoot中，实现了Modal的弹出效果。Modal组件接收两个props，分别是children和onClose。其中，children用于传递Modal中的内容，onClose用于处理Modal的关闭事件。 使用Modal组件时，我们可以在父组件中定义一个state，用于控制Modal的显示和隐藏： ```jsx import React from 'react'; import Modal from './Modal'; class App extends React.Component { state = { showModal: false } handleOpenModal = () => { this.setState({ showModal: true }); } handleCloseModal = () => { this.setState({ showModal: false }); } render() { const { showModal } = this.state; return ( <div> <button onClick={this.handleOpenModal}>Open Modal</button> {showModal && <Modal onClose={this.handleCloseModal}> <h2>Modal Title</h2> <p>Modal Content</p> </Modal> } </div> ); } } export default App; ``` 在上述代码中，我们在父组件中定义了一个showModal状态，用于控制Modal的显示和隐藏。当用户点击“Open Modal”按钮时，我们将showModal设置为true，从而显示Modal组件。当用户点击Modal中的“Close”按钮时，我们调用handleCloseModal方法，将showModal设置为false，从而隐藏Modal组件。 通过封装Modal组件，我们可以在React应用中方便地实现弹窗、提示框等功能，并且可以灵活地控制Modal的显示和隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值