前言

双非大三，已经在广州实习一坤月🐤，差不多有两坤月没写💧文了。
这篇是为了记录一下最近使用Antd5时遇到问题的简单记录吧。
有一天，导师凑过来说，来来来，给你点事情做，你看看这个项目哈。你开个分支，看看能不能尝试把里面的组件去替换成最新的Antd5组件库。
替换组件的过程......很平淡但是没有遇到什么大问题。
但......

静态方法不消费Context

Antd5中提供了modal message notification等函数的静态方法支持我们建议的唤起这些提示组件，但是，当我高高兴兴的在代码中调用message.info时，确实弹了出来，但我敏锐的察觉到，这按钮的主题色怎么不对啊？

出现问题第一件要做的事是什么？
肯定是大喊：导师！！！（nope） 查文档啦！ 翻找了一下，看到了这样的一段话出现。

我得使用useModal才能够消费最外层的ConfigContext，哦喔喔，那我懂了。那我就换咯，诶没问题，能用嘿嘿嘿。换着换着，我来到了一个类组件？？？诶？我尝试在render函数中调用hook，企图他能够生效，咳咳。
hook can not use in class component

！！？寄，那怎么办，我不能放弃这些类组件啊，此时我疯狂转动我的小脑瓜，怎么办，怎么感觉要长脑子了！
🆙 虽然使用库，也要脱离库（React官网写的是库），不要忘记我们只是在写js。 既然useModal返回的modal只是一个已经消费了Context的函数。那在根组件调用一次useModal然后想办法让别的组件能够间接调用到这个返回的modal，那这问题不是有手就行。

代码时刻：

let modal
let meaasge
let notification
function Root({chilren}){
    const [modal1,holder1] = useModal()
    const [meaasge2,holder2] = useMeaasge()
    const [notification3,holder3] = useNotification()
    modal = modal1
    meaasge = meaasge2
    notification = notification3
    return <>
     {holder1}{holder2}{holder3}{chilren}
    </>
}
export { modal,meaasge,notification }

然后我在别的地方一用，哈哈哈，果然没问题 🫵  至于后续，我又在官网看到了，useApp这个hook，而且往下翻...咳咳，思考的过程最重要哈

useModal不能全局配置

可以容易的看出Antd弹窗的关闭图标并不是一个规则的X号(视觉很难受啊😭)。。

组件调用时我可以通过封装一个MyModal组件进行props的预设。
现在换成了modal的函数式调用呢？我需要怎么做？
其实我真正要做的：拿到一个函数，transform这个函数，给他预设一些参数，再返回一个函数，让函数正常执行？等等，又要长脑子了！\

代码时刻：

//给modal弹窗注入属性
function injectCloseIconIntoModal(initModal: ModalInstance) {
  for (const method in initModal) {
    if (Object.prototype.hasOwnProperty.call(initModal, method)) {
      const methodFn = initModal[method];
      if (typeof methodFn === 'function') {
        initModal[method] = function(args) {
          const _args = {
            closeIcon: <Svg svg={Close} />,
            ...args,
          };
          methodFn.bind(this)(_args);
        };
      }
    }
  }
  return initModal;
}

不出意料，这样是ok的，嘿嘿。

怎么清除dom的title属性

要做这个原因是在触控大屏上，因为奇奇怪怪的hover会导致原生自带的title提醒会卡在页面不消失，所以我需要去将所有的title进行remove，并且dom会动态添加。
就这个问题我问了chatgpt，一问就过...太厉害了

function removeTitleAttributes() {
  // 获取页面中所有带有title属性的元素
  const elements = document.querySelectorAll('[title]');

  // 遍历所有元素，移除它们的title属性
  elements.forEach(element => {
    element.removeAttribute('title');
  });
}

// 页面加载后执行一次
removeTitleAttributes();

// 监听DOM变化，动态移除新添加元素的title属性
const observer = new MutationObserver(mutationsList => {
  mutationsList.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const elements = node.querySelectorAll('[title]');
        elements.forEach(element => {
          element.removeAttribute('title');
        });
      }
    });
  });
});

observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
  attributeFilter: ['title'],
});

优化

又让chatgpt写了个判断是否是触屏设备的函数来看是否去除title。咳咳

const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
export default isTouchDevice;

终

大三仔还有很长的路要走。
最后晒一下中午公司自助食堂的烤羊排 🥢