React项目中addEventListener无法正常运行，寻求技术帮助

核心问题 #

1. 多元素选择失效：document.querySelector('.grid-container, .navbar, #hex-grid')仅会返回第一个匹配的DOM元素，剩下的.navbar和#hex-grid不会绑定mousemove事件，导致只有第一个元素能触发光效。
2. React生命周期不兼容：直接在组件顶层执行DOM查询和事件绑定，容易遇到两种问题：
   • 组件渲染时DOM尚未挂载，light或grid为null，事件绑定直接失败；
   • 组件因状态更新重新渲染时，旧DOM被替换，之前绑定的事件监听会失效。
3. 未清理事件监听：没有在组件卸载时移除事件监听，可能造成内存泄漏。

重构后的代码（React函数组件） #

import { useEffect, useRef } from 'react';

function LightEffect() {
  // 用useRef存储light元素，避免重复查询DOM
  const lightRef = useRef(null);

  useEffect(() => {
    // 获取所有目标元素
    const gridElements = document.querySelectorAll('.grid-container, .navbar, #hex-grid');
    const light = lightRef.current;

    if (!light || gridElements.length === 0) return;

    // 提取事件处理函数，方便后续移除监听
    const handleMouseMove = (e) => {
      light.style.left = `${e.clientX}px`;
      light.style.top = `${e.clientY}px`;
    };

    // 给每个匹配元素绑定事件
    gridElements.forEach(el => {
      el.addEventListener('mousemove', handleMouseMove);
    });

    // 组件卸载时清理所有事件监听
    return () => {
      gridElements.forEach(el => {
        el.removeEventListener('mousemove', handleMouseMove);
      });
    };
  }, []); // 空依赖数组，确保仅在组件挂载/卸载时执行一次

  return (
    <>
      {/* 将light元素的ref绑定到lightRef */}
      <div ref={lightRef} className="light"></div>
      {/* 你的其他组件内容：.grid-container、.navbar、#hex-grid */}
    </>
  );
}

export default LightEffect;

关键优化点 #

• 用useRef管理DOM元素：避免每次渲染重复调用querySelector，同时保证能稳定获取到light元素。
• 替换querySelector为querySelectorAll：获取所有匹配的目标元素，遍历绑定事件实现全元素触发。
• 在useEffect中处理事件逻辑：利用React生命周期特性，确保DOM挂载后再执行绑定，组件卸载时自动清理监听，避免内存泄漏。
• 提取独立事件处理函数：解决匿名函数无法被准确移除的问题，保证监听清理的有效性。

额外提示 #

如果.light元素是通过条件渲染控制显示的，需要在useEffect的依赖数组中加入控制其显示的状态，确保状态变化时重新执行事件绑定逻辑。

内容的提问来源于stack exchange，提问作者ppm.eth