1.通过useMessage自定义Hook使用
官网推荐使用Hook调用的方法
import { Button, message } from 'antd';
const App = () => {
//在函数组件内注册
const [messageApi, contextHolder] = message.useMessage();
const info = () => {
//调用open使用
messageApi
.open({
type: 'success',
content: '成功',
duration: 1
})
};
return (
//这一处必须要有
{contextHolder}
<Button type="primary" onClick={info}>
Display normal message
</Button>
);
};
export default App;这种方法只能在本页显示，如果显示后跳转页面就不会显示。因为{contextHolder}是写在本页面的。如果需要跳转页面可以用promise调用文章来源：https://www.toymoban.com/news/detail-681020.html
messageApi
.open({
type: 'success',
content: '成功',
duration: 1
})
.then(()=>{
navigate('/',{replace: true})
})2.静态调用
传递的参数依次为，提示信息、显示时间、关闭后触发的回调文章来源地址https://www.toymoban.com/news/detail-681020.html
message.success('成功', 0, onClose)
message.error('错误', 0, onClose)
message.info('普通', 0, onClose)
message.warning('警告', 0, onClose)
message.loading('等待', 0, onClose)到了这里，关于React——Ant Design组件库Message全局提示的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
