经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React封装弹出框组件的方法
来源:jb51  时间:2022/8/23 16:19:20  对本文有异议

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

效果图

文件目录

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

  1. import React from "react";
  2.  
  3. export const HAlertList = () => {
  4. ? ? return (
  5. ? ? ? ? <div
  6. ? ? ? ? ? ? id="alert-list"
  7. ? ? ? ? ? ? style={{
  8. ? ? ? ? ? ? ? ? position:'fixed',
  9. ? ? ? ? ? ? ? ? top: '6%',
  10. ? ? ? ? ? ? ? ? left: '50%',
  11. ? ? ? ? ? ? ? ? transform: `translate(-50%)`
  12. ? ? ? ? ? ? }}
  13. ? ? ? ? ></div>
  14. ? ? )
  15. }

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

  1. export const root = ReactDOM.createRoot(
  2. ? document.getElementById('root') as HTMLElement
  3. );
  4. root.render(
  5. ? // <React.StrictMode>
  6. ? <>
  7. ? ? <Provider store={store}>
  8. ? ? ? <BrowserRouter>
  9. ? ? ? ? <App />
  10. ? ? ? ? <HAlertList/>
  11. ? ? ? </BrowserRouter>
  12. ? ? </Provider>
  13. ? </>
  14. ? // </React.StrictMode>
  15. );

index.tsx 用于创建单个alert

规定传入的参数及类型

  1. export interface HAlertProps {
  2. ? ? status:'success' | 'error',
  3. ? ? text:string
  4. }

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

  1. export const HAlert = (props:HAlertProps) => {
  2. ? ? return (
  3. ? ? ? ? <AlertContainer status={props.status}>
  4. ? ? ? ? ? ? {props.text}
  5. ? ? ? ? </AlertContainer>
  6. ? ? )
  7. }
  8.  
  9.  
  10. const AlertContainer = styled.div<{
  11. ? ? status:string
  12. }>`
  13. ? ? width: 65vw;
  14. ? ? height: 30px;
  15. ? ? background-color: ${props => props.status === 'success' ? '#a8dda8' : '#ff4b4b'};
  16. ? ? text-align: center;
  17. ? ? margin-bottom: 10px;
  18. `

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

use.tsx 函数式调用alert组件

  1. import React, { useState } from 'react'
  2. import ReactDOM from 'react-dom/client'
  3. import { HAlertProps, HAlert } from './index'
  4.  
  5. export class AlertList {
  6. ? ? static list: HAlertProps[] = []
  7. ? ? static el: ReactDOM.Root | null = null
  8. ? ? static showAlert = (props: HAlertProps) => {
  9. ? ? ? ? let container: ReactDOM.Root
  10. ? ? ? ? if (AlertList.el) {
  11. ? ? ? ? ? ? container = AlertList.el
  12. ? ? ? ? } else {
  13. ? ? ? ? ? ? AlertList.el = container = ReactDOM.createRoot(
  14. ? ? ? ? ? ? ? ? document.getElementById('alert-list') as HTMLElement
  15. ? ? ? ? ? ? )
  16. ? ? ? ? }
  17.  
  18. ? ? ? ? AlertList.list.push(props)
  19. ? ? ? ? container.render(
  20. ? ? ? ? ? ? <>
  21. ? ? ? ? ? ? ? ? {AlertList.list.map((value: HAlertProps, index: number) => {
  22. ? ? ? ? ? ? ? ? ? ? return <HAlert {...value} key={index} />
  23. ? ? ? ? ? ? ? ? })}
  24. ? ? ? ? ? ? </>
  25. ? ? ? ? )
  26. ? ? ? ? setTimeout(() => {
  27. ? ? ? ? ? ? AlertList.list.shift()
  28. ? ? ? ? ? ? container.render(
  29. ? ? ? ? ? ? ? ? <>
  30. ? ? ? ? ? ? ? ? ? ? {AlertList.list.map((value: HAlertProps, index: number) => {
  31. ? ? ? ? ? ? ? ? ? ? ? ? return <HAlert {...value} key={index} />
  32. ? ? ? ? ? ? ? ? ? ? })}
  33. ? ? ? ? ? ? ? ? </>
  34. ? ? ? ? ? ? )
  35. ? ? ? ? }, 2000)
  36.  
  37. ? ? }
  38. }

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

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

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

3.渲染弹出框列表

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号