如果不对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用来保证每次点击后组件重新渲染