React封裝彈出框組件的方法
本文實例為大家分享了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-router4路由監(jiān)聽的實現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06useEffect中return函數(shù)的作用和執(zhí)行時機解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01