React中如何处理DOM遍历与while循环相关的no-loop-func问题

你对该规则的认知存在偏差：no-loop-func 并不只在循环内函数修改外部变量时触发，只要循环内部声明的函数引用了循环作用域内随迭代变化的变量，规则就会抛出警告。
你的代码中，while 循环内传给listOfBannedClasses.some()的箭头函数引用了每次迭代都会被重新赋值的target变量，完全命中规则检测逻辑。JS闭包捕获的是变量引用而非当前迭代的值，这类写法如果后续涉及异步调用，很容易出现拿到变量最终值而非预期迭代值的经典bug，这也是该规则设计的核心初衷。

最小改动修复（不改变原有遍历逻辑） #

只需要把循环内函数要访问的父节点引用提前提取为循环内的局部常量，避免回调直接引用可变的target即可消除警告，同时可以简化冗余的空值判断：

function scrollHorizontally(e, listOfBannedClasses, parentClass){
    let target = e.target;
    // 合并null、undefined判断，直接取truthy值即可
    while(target.parentNode && target.className !== parentClass){
        const currentParent = target.parentNode;
        // 回调内只引用当前迭代固定的currentParent，不再引用可变的target
        if(listOfBannedClasses.some(className => currentParent.classList.contains(className))){
            return;
        }      
        target = currentParent;
    }
    // 后续滚动逻辑
}

更简洁规范的原生API实现 #

如果不需要兼容IE等老旧浏览器，可以直接使用DOM原生的Element.closest()方法实现向上遍历，逻辑更清晰，从写法上就规避了循环内函数的问题：

function scrollHorizontally(e, listOfBannedClasses, parentClass){
    const target = e.target;
    // 拼接DOM选择器
    const bannedSelector = listOfBannedClasses.map(cls => `.${cls}`).join(',');
    const parentSelector = `.${parentClass}`;

    // 向上查找最近的匹配节点
    const closestBannedNode = target.closest(bannedSelector);
    const closestParentNode = target.closest(parentSelector);

    // 如果在命中目标父节点前先碰到了禁用类节点，直接终止逻辑
    if(
        closestBannedNode 
        && closestParentNode 
        && closestBannedNode.closest(parentSelector) === closestParentNode
    ){
        return;
    }

    // 后续滚动逻辑
}

内容的提问来源于stack exchange，提问作者altruios