如何从已有DOM node元素获取对应ref并绑定事件监听器

核心结论：无法从已有的原生DOM节点反向获取对应的React ref对象 #

React的ref是框架层提供的元素引用载体，仅在你渲染元素时显式绑定ref属性时才会生成对应关联，原生DOM节点本身没有存储指向对应React ref的映射，没有内置API支持从node反查ref。

关于通过ref添加事件监听的实现方案 #

如果你不想直接通过DOM查询拿到节点加监听，可以在渲染阶段提前收集对应元素的ref，具体实现逻辑如下：

1. 提前声明ref数组用于存储所有可滚动元素的引用

import { useRef, useEffect } from 'react';

const scrollableRefs = useRef([]);

2. 渲染可滚动元素时，给对应节点绑定ref存入数组

// 假设scrollableList是你所有可滚动元素的渲染数据源
{scrollableList.map((item, index) => (
  <div
    key={item.id}
    ref={el => scrollableRefs.current[index] = el}
  >
    {/* 元素内容 */}
  </div>
))}

3. 在副作用钩子中通过ref拿到节点，添加事件监听，同时记得卸载时移除监听避免内存泄漏

useEffect(() => {
  const someHandler = (e) => {
    // 滚动事件处理逻辑
  };

  scrollableRefs.current.forEach(node => {
    if (!node) return;
    node.addEventListener('scroll', someHandler, { passive: false });
  });

  // 清理函数
  return () => {
    scrollableRefs.current.forEach(node => {
      if (!node) return;
      node.removeEventListener('scroll', someHandler, { passive: false });
    });
  };
}, []);

现有实现的优化建议 #

你当前通过DOM查询拿到节点数组后直接加监听的写法本身是可用的，不需要硬绕ref逻辑——ref最终存储的也是原生DOM节点，两种方式拿到的节点对象完全一致，事件绑定的效果没有区别。仅需要额外注意：

• 在React等框架环境下使用时，必须在组件卸载时同步移除绑定的事件监听，避免内存泄漏
• 非必要场景下尽量减少全局DOM查询，能在渲染阶段通过ref收集元素的优先使用ref方案，性能更可控

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