ant message react 支持手动关闭

有个vue的做法,可以参考吧,我没用成功,链接

我自己总结的三种方法:

 

 

1.源码里面有个icon属性,可以替换成ant自带的icon组件,添加点击事件,message.destroy()

 

 2.获取这个类名dom,简单粗暴,使用message.destroy方法

export  const error = (content) => {
    let config = {
        content: content,
        duration:0,
        onClick: (e)=>{
          
           let dom = document.getElementsByClassName('anticon anticon-close-circle')[0]
            dom.onclick = function (){
               message.destroy()
            }
        }
    }
    message.error(config);
};

3.利用e.target可能更准确一点吧,就这么个思路,有点麻烦,

export  const error = (content) => {
    let config = {
        content: content,
        duration:0,
        onClick: (e)=>{
            let dom = e.target;
            if(dom.tagName === 'svg' || dom.tagName === 'path'){
                message.destroy()
            }
        }
    }
    message.error(config);
};