React封装弹出框组件的方法

本文实例为大家分享了React封装弹出框组件的方法,供大家参考,具体内容如下

效果图

文件目录

alertList.tsx 用于容纳弹出框的容器

import React from "react";

export const HAlertList = () => {
    return (
        <div
            id="alert-list"
            style={{
                position:'fixed',
                top: '6%',
                left: '50%',
                transform: `translate(-50%)`
            }}
        ></div>
    )
}

将该组件置于项目根目录下的index.tsx

export const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // <React.StrictMode>
  <>
    <Provider store={store}>
      <BrowserRouter>
        <App />
        <HAlertList/>
      </BrowserRouter>
    </Provider>
  </>
  // </React.StrictMode>
);

index.tsx 用于创建单个alert

规定传入的参数及类型

export interface HAlertProps {
    status:'success' | 'error',
    text:string
}

传入一个状态success或者error,用于区别样式

export const HAlert = (props:HAlertProps) => {
    return (
        <AlertContainer status={props.status}>
            {props.text}
        </AlertContainer>
    )
}

const AlertContainer = styled.div<{
    status:string
}>`
    width: 65vw;
    height: 30px;
    background-color: ${props => props.status === 'success' ? '#a8dda8' : '#ff4b4b'};
    text-align: center;
    margin-bottom: 10px;
`

此处使用emotion(css-in-js)的技术,即使用js编写css样式
当HTML文档中识别到AlertContainer标签时,会转变为具有对应样式的div标签

use.tsx 函数式调用alert组件

import React, { useState } from 'react'
import ReactDOM from 'react-dom/client'
import { HAlertProps, HAlert } from './index'

export class AlertList {
    static list: HAlertProps[] = []
    static el: ReactDOM.Root | null = null
    static showAlert = (props: HAlertProps) => {
        let container: ReactDOM.Root
        if (AlertList.el) {
            container = AlertList.el
        } else {
            AlertList.el = container = ReactDOM.createRoot(
                document.getElementById('alert-list') as HTMLElement
            )
        }

        AlertList.list.push(props)
        container.render(
            <>
                {AlertList.list.map((value: HAlertProps, index: number) => {
                    return <HAlert {...value} key={index} />
                })}
            </>
        )
        setTimeout(() => {
            AlertList.list.shift()
            container.render(
                <>
                    {AlertList.list.map((value: HAlertProps, index: number) => {
                        return <HAlert {...value} key={index} />
                    })}
                </>
            )
        }, 2000)

    }
}

使用类编写对用的函数,是因为类是存储数据比较好的办法,AlertList .list存储着弹出框容器中所有弹出框的信息,AlertList.el为弹出框容器的节点
showAlert的逻辑:

1.查看AlertList.el是否有值,如果没有则创建创建节点

2.将该HAlert组件的信息存入AlertList .list

3.渲染弹出框列表

4.开启定时器(此处写的不是特别好),每隔2s取消一个HAlert

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • react封装Dialog弹框的方法

    本文实例为大家分享了react封装Dialog弹框的具体代码,供大家参考,具体内容如下 Dialog.js import React, { Component, Children } from "react"; import { createPortal } from "react-dom"; import "../static/css/Dialog.scss" export default class Dialog extends Compon

  • React Native实现进度条弹框的示例代码

    本文介绍了React Native实现进度条弹框,分享给大家 我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载. 首先实现进度条. import React, { PureComponent } from 'react'; import { StyleSheet, View, Animated, Easing, } from 'react-native'; class Bar extends PureComponent { con

  • react封装全局弹框的方法

    本文实例为大家分享了react封装全局弹框的具体代码,供大家参考,具体内容如下 弹框效果图 文件布局 index.js /* eslint-disable react/no-render-return-value */ import React, { Component } from 'react' import { is, fromJS } from 'immutable' import ReactDOM from 'react-dom' import './alert.less' const

  • react-native 封装选择弹出框示例(试用ios&android)

    在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

  • react使用antd表单赋值,用于修改弹框的操作

    1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct

  • React封装弹出框组件的方法

    本文实例为大家分享了React封装弹出框组件的方法,供大家参考,具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = () => {     return (         <div             id="alert-list"             style={{                 posi

  • vue3手动封装弹出框组件message的方法

    本文实例为大家分享了vue3手动封装弹出框组件message的具体代码,供大家参考,具体内容如下 封装组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i

  • 前端js弹出框组件使用方法

    下面分享一个js 弹出窗, 分 toast , dialog , load 三种弹窗 , 下面用js css 来实现以下: 首先是js代码 | 采用了 es6 的写法 //公共弹窗加载动画 const DIALOG_TOAST = '1', DIALOG_DIALOG = '2', DIALOG_LOAD = '3', class Dialog { constructor(type = DIALOG_DIALOG, dialogContent = '请求失败', wrapClassName =

  • vue弹出框组件封装实例代码

    新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue <template> <div class="mack" v-if="isShow"> <div class="mackWeb" :style="text.mackStyle"> <div class="title font_b" v-if="t

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

  • 使用vue实现各类弹出框组件

    简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model=&

  • 易语言图片框组件使用方法

    易语言可以开发些实用的程序,它与软件开发的编程语言一样,可以先从简单的程序开始学习,可用最基本的组件工具上的控件来做窗口程序的开发,这里以做一个易语言程序来给大家介绍,图片框组件的程序制作的过程. 1.将易语言安装好后,打开一个易语言的程序,鼠标左键单击菜单[程序]>>[新建],在右边工具箱中拖动一个图片框组件,如下图所示. 2.在弹出的[图框组件]的窗口上,可以图框名称重新命名,如下图所示. 3.鼠标左键单击[图框]属性,加载一个卡通的图片,如下图所示. 4.选择加载图片的文件夹路径,加载图

  • 让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    本文将介绍让JavaScript的Alert弹出框失效的方法,也就是禁止让JS弹出警告框. 因为现在都提倡绿色上网环境,弹出框难免会影响你的心情,所以通过以下代码可将Js弹出框屏蔽掉. <script LANGUAGE="JavaScript"> <!-- window.alert = function(str){ return ; } alert("不能弹出警示框");//--> </script> 实现思路是对"al

  • 易语言分组框组件使用方法

    分组框是干什么用的呢?顾名思义,它是用来分组的!确切的说,分组框是用来划分窗口界面区域的.下面,我们就通过一个小例子,认识一下分组框组件. 1.首先,运行易语言,在弹出的"新建工程"文件对话框中,选择"Windows窗口程序"并点击"确定"按钮.如图: 2."基础设施"已建好,然后简单布局一个窗口界面.首先,绘制两个分组框组件.四个单选框组件及一个按钮组件.调整好各组件的相对位置和大小.如图: 3.修改各组件的相应属性,比如标

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

随机推荐