同事:怎么这样用Antd?奇奇怪怪

9,291 阅读3分钟

前言

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

静态方法不消费Context

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

image.png

出现问题第一件要做的事是什么?
肯定是大喊:导师!!!(nope) 查文档啦! 翻找了一下,看到了这样的一段话出现。

image.png

我得使用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,而且往下翻...咳咳,思考的过程最重要哈

image.png

useModal不能全局配置

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

image.png

组件调用时我可以通过封装一个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属性

image.png

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

image.png

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;

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

image.png