antdesign已经给我们提供了很好的组件使用体验,但是我们还需要根据自己的项目业务进行更好的封装,减少我们的代码量,提升开发体验
效果展示
开起来和官网的使用没什么区别,但是我们在使用的时候,进行了二次封装,更利于我们进行开发
MyNotification.jsx,是我们的业务页面
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参数的,所以可以避免初始化一上来就弹窗
useEffect(() => {
if(type){
api[type]({
message,
description,
placement:'topRight'
})
}
},[type,description])
return <>
{contextHolder}
</>
}
export default MyNotification
功能基本完成,当然还可以根据官网的组件,补充更多的场景需求,就自己去完善了