欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React封裝彈出框組件的方法

 更新時間:2022年08月23日 15:21:21   作者:TA_WORLD  
這篇文章主要為大家詳細(xì)介紹了React封裝彈出框組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了React封裝彈出框組件的方法,供大家參考,具體內(nèi)容如下

效果圖

文件目錄

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 用于創(chuàng)建單個alert

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

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

傳入一個狀態(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編寫css樣式
當(dāng)HTML文檔中識別到AlertContainer標(biāo)簽時,會轉(zhuǎn)變?yōu)榫哂袑?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)

? ? }
}

使用類編寫對用的函數(shù),是因為類是存儲數(shù)據(jù)比較好的辦法,AlertList .list存儲著彈出框容器中所有彈出框的信息,AlertList.el為彈出框容器的節(jié)點
showAlert的邏輯:

1.查看AlertList.el是否有值,如果沒有則創(chuàng)建創(chuàng)建節(jié)點

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

3.渲染彈出框列表

4.開啟定時器(此處寫的不是特別好),每隔2s取消一個HAlert

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react源碼合成事件深入解析

    react源碼合成事件深入解析

    這篇文章主要為大家介紹了react源碼合成事件深入解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • react 實現(xiàn)頁面代碼分割、按需加載的方法

    react 實現(xiàn)頁面代碼分割、按需加載的方法

    本篇文章主要介紹了react 實現(xiàn)頁面代碼分割、按需加載的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React-router4路由監(jiān)聽的實現(xiàn)

    React-router4路由監(jiān)聽的實現(xiàn)

    這篇文章主要介紹了React-router4路由監(jiān)聽的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • React Antd中如何設(shè)置表單只輸入數(shù)字

    React Antd中如何設(shè)置表單只輸入數(shù)字

    這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 淺談React之狀態(tài)(State)

    淺談React之狀態(tài)(State)

    這篇文章主要介紹了淺談React之狀態(tài)(State),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • useEffect中return函數(shù)的作用和執(zhí)行時機解讀

    useEffect中return函數(shù)的作用和執(zhí)行時機解讀

    這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • react native 仿微信聊天室實例代碼

    react native 仿微信聊天室實例代碼

    這篇文章主要介紹了react native 仿微信聊天室實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • React新文檔切記不要濫用Ref

    React新文檔切記不要濫用Ref

    這篇文章主要為大家介紹了React新文檔濫用Ref出現(xiàn)的問題詳解,以及如何正確的使用Ref,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2022-07-07
  • React組件之間的通信的實例代碼

    React組件之間的通信的實例代碼

    本篇文章主要介紹了React組件間通信的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • react導(dǎo)出excel文件的四種方式

    react導(dǎo)出excel文件的四種方式

    本文主要介紹了react導(dǎo)出excel文件的四種方式,主要包括原生js導(dǎo)出,使用?js-export-excel,使用xlsx導(dǎo)出, 使用react-html-table-to-excel,感興趣的可以了解一下
    2023-11-11

最新評論