React中scrollHorizontally函数触发ESLint不安全变量引用告警如何优化

触发的ESLint规则是no-loop-func：当循环块内部创建的闭包函数（比如代码里while块内listOfBannedClasses.some()的箭头回调），直接引用了循环作用域里会被重新赋值的可变变量（也就是代码里的target），ESLint会判定这种引用不安全——因为闭包持有的是变量的内存引用而非值快照，后续循环内对target的重新赋值，会让闭包拿到不符合预期的变量状态。
ESLint的告警位置经常会直接标记在循环内的变量赋值行（也就是代码里的target = target.parentNode），本质是关联了“被闭包捕获的可变变量的修改点”，而非直接定位闭包本身的问题。

核心调整思路：

• 循环内需要被闭包引用的DOM节点，每次迭代时存入独立的块级常量做快照，避免闭包捕获会被循环修改的可变变量
• 精简原实现中冗余的标志位逻辑，去掉不必要的forEach遍历赋值流程
• 补全原代码中parentNode为null的边界判断，避免遍历到DOM根节点时抛错

优化后的完整代码：

function scrollHorizontally(e, listOfBannedClasses, parentClass) {
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();

  let currentNode = e.target;
  // 初始判断：悬停元素本身属于禁用类时，直接退出保留原生滚动行为
  const isInitialBanned = listOfBannedClasses.some(c => currentNode.classList.contains(c));
  if (isInitialBanned) return;

  // 向上遍历DOM树定位目标父容器
  while (currentNode.parentNode && currentNode.className !== parentClass) {
    // 每次迭代创建独立的父节点快照常量，供闭包引用
    const parentNodeSnapshot = currentNode.parentNode;
    // 闭包仅引用不可变的快照值，不会触发循环内不安全引用告警
    const isParentBanned = listOfBannedClasses.some(x => parentNodeSnapshot.classList.contains(x));
    if (isParentBanned) return;

    currentNode = parentNodeSnapshot;
  }

  const deltaY = e.deltaY;
  currentNode.scrollLeft -= (-deltaY || e.wheelData || -e.detail);
}

• 循环内的some回调现在引用的是每次迭代独立生成、不可修改的快照常量，完全满足no-loop-func规则的校验要求，不会再弹出告警
• 原有业务逻辑100%保留：
  • 悬停在带禁用类的元素上时，不干预原生滚动
  • 向上遍历过程中如果路径上遇到禁用类元素，直接退出不拦截滚动
  • 定位到目标父容器后，将纵向滚轮的位移量映射为容器的横向滚动位移
• 额外补全了parentNode为null的边界判断，避免DOM遍历到根节点时因访问空属性抛错

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