react18+antd5.x(1):Notification组件的二次封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了react18+antd5.x(1):Notification组件的二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

antdesign已经给我们提供了很好的组件使用体验，但是我们还需要根据自己的项目业务进行更好的封装，减少我们的代码量，提升开发体验

效果展示

react18+antd5.x(1):Notification组件的二次封装,react18+antdesign5.x实战开发,react.js,前端
开起来和官网的使用没什么区别，但是我们在使用的时候，进行了二次封装，更利于我们进行开发

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

功能基本完成，当然还可以根据官网的组件，补充更多的场景需求，就自己去完善了

关注我的个人公众号，获取更多前后端开发经验知识
react18+antd5.x(1):Notification组件的二次封装,react18+antdesign5.x实战开发,react.js,前端文章来源地址https://www.toymoban.com/news/detail-673896.html