首页 > 解决方案 > 循环中声明的函数包含对变量的不安全引用

问题描述

好的,我在整个应用程序中重用此功能,并且 react es lint 发出警告,指出存在不安全的变量。

function scrollHorizontally(e,listOfBannedClasses, parentClass)
    {
    /*
    e: event, listOfBannedClasses:array of classNames, parentClass:  target className
    */
    let target = e.target;
    let returnEarly = false;
    listOfBannedClasses.forEach(c=>{
        if(target.classList.contains(c)){returnEarly=true;}
    })
        if(returnEarly){return} //if you are hovering over one of these divs default scroll behavior
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    while(target.parentNode!== undefined && target.className!==parentClass){
        if(listOfBannedClasses.some(x=>target.parentNode.classList.contains(x)))
            {
            return;
        }      
        target = target.parentNode; //'unsafe' reference
    }
    let deltaY = e.deltaY ;
    target.scrollLeft -= (-deltaY|| e.wheelData || -e.detail);  
}

我已经盯着代码看了一段时间了。而且我正在以一种不同的方式编写它,以使其中没有 target=target.parentNode 。

该代码有效,它需要一个滚动事件、一个类名数组和一个目标——并且只有在 DOM 遍历未命中任何禁止类并最终到达目标类时才会向左或向右滚动。结果是您可以向上/向下滚动列表,并在这些列表的容器上向左/向右滚动。

标签: javascriptreactjs

解决方案


推荐阅读