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);
};