本文介绍在React项目中封装自定义Alert弹出框组件的实现方案。通过TypeScript定义接口，利用Emotion进行CSS-in-JS样式控制，并封装AlertList类以支持函数式调用。代码展示了如何动态创建DOM节点、管理弹窗状态列表及实现自动关闭逻辑，适用于需要统一交互反馈的前端场景。
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实例。
首先规定传入组件的参数及其对应的类型定义。
单个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技术）来编写样式。当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则指向弹出框容器的DOM节点。showAlert函数的执行逻辑如下：
1. 检查AlertList.el是否存在值，若不存在则创建对应的DOM节点。
2. 将该HAlert组件的相关信息存入AlertList .list数组中。
3. 渲染弹窗列表以展示在界面上。
4. 启动定时器（此处实现并非最优），每隔2秒自动移除一个HAlert。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。