小编sab*_*lam的帖子

我一直在研究一个应用程序。页面上有多个组件。它们里面的内容是可滚动的。预期的功能是当我在组件内滚动时，应该禁用不同元素上的悬停效果。在互联网上搜索后，我有一个可行的解决方案。我创建了一个像这样的 HoverDisabler 组件，

import React, {useEffect} from 'react';

export const HoverDisabler = ({children}) => {
  let timer = 0;
  useEffect(() => { 
     document.addEventListener('scroll', () => {
        clearTimeout(timer);
        if(!document.body.classList.contains('hoverDisabled')){
            document.body.classList.add('hoverDisabled');
        }
        timer = setTimeout(() => {
            document.body.classList.remove('hoverDisabled');
        },500);
     }, true); 
  }, []);
  return children;
}

hoverDisabled 的 css 如下，

.hoverDisabled {
    pointer-events: 'none',
}

我正在App用HoverDisabler这样的方式包装我的根组件，

<HoverDisabler><App /></HoverDisabler>

现在在所有组件中，如果我开始滚动，则hoverDisabled该类将添加到正文中，并在我停止滚动时将其删除。一切正常。我很好奇这是否是拥有此功能的正确方法？由于我缺乏经验，这种方法是否有任何缺点或我忽略的一些问题？