React如何封裝彈出框組件

這篇文章主要講解了“React如何封裝彈出框組件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“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>
    )
}

將該組件置于項(xiàng)目根目錄下的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 用于創(chuàng)建單個(gè)alert

規(guī)定傳入的參數(shù)及類型

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

傳入一個(gè)狀態(tài)success或者error，用于區(qū)別樣式

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)的技術(shù)，即使用js編寫(xiě)css樣式
當(dāng)HTML文檔中識(shí)別到AlertContainer標(biāo)簽時(shí)，會(huì)轉(zhuǎn)變?yōu)榫哂袑?duì)應(yīng)樣式的div標(biāo)簽

use.tsx 函數(shù)式調(diào)用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)

    }
}

使用類編寫(xiě)對(duì)用的函數(shù)，是因?yàn)轭愂谴鎯?chǔ)數(shù)據(jù)比較好的辦法，AlertList .list存儲(chǔ)著彈出框容器中所有彈出框的信息，AlertList.el為彈出框容器的節(jié)點(diǎn)
showAlert的邏輯：

1.查看AlertList.el是否有值，如果沒(méi)有則創(chuàng)建創(chuàng)建節(jié)點(diǎn)

2.將該HAlert組件的信息存入AlertList .list中

3.渲染彈出框列表

4.開(kāi)啟定時(shí)器（此處寫(xiě)的不是特別好），每隔2s取消一個(gè)HAlert

感謝各位的閱讀，以上就是“React如何封裝彈出框組件”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)React如何封裝彈出框組件這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！