react对antd全局消息提示二次封装

如果不对messageApi进行二次封装，直接使用会造成一些报错，现在我们封装后使用

封装

import React, { useEffect } from 'react';
import { message } from 'antd';

export default function Message(props:any) {
    useEffect(() => {
        message.open({
            type: props.message.type,
            content: props.message.content,
        });
    }, []);
    return (
        <>

        </>
    );
}

使用

import React, {useEffect, useState} from 'react'
import './index.css'
import Message from '../../global/message'
export default function Index() {
  const [showMessage, setShowMessage] = useState(false);
  const [messageData, setMessageData] = useState<{type: string, content: string}>({ type: '', content: '' });
const onFinish = (values: any) => {   //内容校验成功后输出
    
        setMessageData({ content:response.data.msg+"，重新登录后生效", type: 'success' }); // 设置 type 为 'info'
        setShowMessage(true);
     
  };
  return (
      <div className='personMsg'>
        {showMessage && <Message message={messageData} key={Date.now()}/>}
      </div>
  )
}

通过父组件传值的方式显示不同内容，key用来保证每次点击后组件重新渲染