antdesign已經(jīng)給我們提供了很好的組件使用體驗(yàn)，但是我們還需要根據(jù)自己的項(xiàng)目業(yè)務(wù)進(jìn)行更好的封裝，減少我們的代碼量，提升開發(fā)體驗(yàn)
效果展示
開起來和官網(wǎng)的使用沒什么區(qū)別，但是我們在使用的時候，進(jìn)行了二次封裝，更利于我們進(jìn)行開發(fā)
MyNotification.jsx,是我們的業(yè)務(wù)頁面
import React, { useState } from 'react';
import {notification,Button,Space } from 'antd';
import MyNotificationIns from './NotificationIns';
function MyNotification(){
const [notify,setType] = useState({type:'',description:''})
const showNotificationSuccess = () => {
setType({
type:'success',
message:'溫馨提示:',
description:'this is a success tips...'
})
}
const showNotificationError = () => {
setType({
type:'error',
message:'溫馨提示:',
description:'this is a fail tips...'
})
}
return <>
<Space>
<Button type='primary' onClick={showNotificationSuccess}>成功</Button>
<Button type='primary' danger onClick={showNotificationError}>失敗</Button>
</Space>
//組件的引入
<MyNotificationIns type={notify.type} description={notify.description} message={notify.message}/>
</>
}
export default MyNotification
NotificationIns.jsx,使我們的組件頁面
import React,{ useEffect } from 'react';
import {notification } from 'antd';
const MyNotification = ({type,message,description}) => {
const [api,contextHolder] = notification.useNotification()
//初始化的時候是沒有type和description參數(shù)的，所以可以避免初始化一上來就彈窗
useEffect(() => {
if(type){
api[type]({
message,
description,
placement:'topRight'
})
}
},[type,description])
return <>
{contextHolder}
</>
}
export default MyNotification
功能基本完成，當(dāng)然還可以根據(jù)官網(wǎng)的組件，補(bǔ)充更多的場景需求，就自己去完善了文章來源：http://www.zghlxwxcb.cn/news/detail-673896.html
關(guān)注我的個人公眾號，獲取更多前后端開發(fā)經(jīng)驗(yàn)知識
文章來源地址http://www.zghlxwxcb.cn/news/detail-673896.html
到了這里，關(guān)于react18+antd5.x(1):Notification組件的二次封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
