React DOM操作与事件处理问题：scrollMove函数未触发求助

问题背景 #

用户原本通过原生JS监听document.body的mousemove事件，实现拖动调整容器宽度的交互，改用React的useRef和内置事件处理后，scrollMove函数无法触发，以下是错误分析和正确改写方案。

原生JS代码（用户提供） #

document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  let x = e.pageX;
  x -= document.querySelector('.container').getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
  
});


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.querySelector('.container').offsetWidth)));
  if (active==="container-mid"){
    document.querySelector('.container-mid').style.width = transform+"px";
    scrolMid.style.left = transform-25+"px";
    if (scrolTip.getBoundingClientRect().left>scrolMid.getBoundingClientRect().left-5){
      document.querySelector('.mainTop').style.width = transform-5+"px";
      scrolTip.style.left = transform-30+"px";
    }
  }
}

// 对应DOM结构
return (
  <div className="container">
    <div className="container-mid">...</div>
    <div className="scrolMid">......</div>
    <div className="maintip">
      <div className="scrolMid">......</div>
    </div>
  </div>
)

用户改写的错误React代码（片段） #

const containerRef = useRef(null);
const ytu = () => {
   if (!active) return;
  let x = e.pageX;
  x -= document.containerRef.getBoundingClientRect().left;
  scrollMove(x);
  console.log("moving")
}

return (
<div className="container"
ref={containerRef}
onMouseMove={ytu}
>
)

const container-midRef = useRef(null);
const scrolMidRef-midRef = useRef(null);
const scrolTipRef = useRef(null);
const mainTopRef = useRef(null);


function scrollMove(x){
  let transform = Math.max(0,(Math.min(x,document.containerRef.offsetWidth)));
  if (active==="container-midRef"){
    document.container-midRef.style.width = transform+"px";
    scrolMidRef.style.left = transform-25+"px";
    if (scrolTipRef.getBoundingClientRect().left>scrolMidRef.getBoundingClientRect().left-5){
      document.mainTopRef.style.width = transform-5+"px";
      scrolTipRef.style.left = transform-30+"px";
    }
  }
}

核心错误点分析 #

1. 事件函数未接收event参数：ytu函数里使用了e.pageX，但定义时未传入e，导致e未定义，函数直接报错中断，scrollMove自然不会触发。
2. useRef引用方式错误：React的useRef获取DOM元素必须通过.current属性（比如containerRef.current），document.containerRef是完全错误的写法。
3. 变量命名非法：container-midRef、scrolMidRef-midRef这类带减号的命名是无效的JavaScript变量名，必须改成驼峰式（如containerMidRef、scrolMidRef）。
4. active判断值错误：原生代码判断active==="container-mid"，用户改成了"container-midRef"，若active变量逻辑未修改，此判断永远不成立，scrollMove内的代码不会执行。
5. scrollMove内DOM引用错误：比如document.container-midRef.style应改为containerMidRef.current.style，且scrolMidRef在用户代码中未正确定义（写了scrolMidRef-midRef，但调用时用scrolMidRef）。

正确改写代码 #

import { useRef, useEffect } from 'react';

function YourComponent() {
  const containerRef = useRef(null);
  const containerMidRef = useRef(null);
  const scrolMidRef = useRef(null);
  const scrolTipRef = useRef(null);
  const mainTopRef = useRef(null);

  // 若要和原生一致监听body的mousemove，用useEffect绑定
  useEffect(() => {
    const handleMouseMove = (e) => {
      if (!active) return;
      if (!containerRef.current) return;
      
      let x = e.pageX;
      x -= containerRef.current.getBoundingClientRect().left;
      scrollMove(x);
      console.log("moving");
    };

    document.body.addEventListener('mousemove', handleMouseMove);
    return () => {
      document.body.removeEventListener('mousemove', handleMouseMove);
    };
  }, [active]); // 依赖active避免闭包问题

  function scrollMove(x) {
    // 先判断所有ref是否挂载完成，避免null报错
    if (!containerRef.current || !containerMidRef.current || !scrolMidRef.current || !scrolTipRef.current || !mainTopRef.current) return;
    
    const containerWidth = containerRef.current.offsetWidth;
    let transform = Math.max(0, Math.min(x, containerWidth));
    
    // 保持和原生一致的active判断值
    if (active === "container-mid") {
      containerMidRef.current.style.width = `${transform}px`;
      scrolMidRef.current.style.left = `${transform - 25}px`;
      
      const scrolTipLeft = scrolTipRef.current.getBoundingClientRect().left;
      const scrolMidLeft = scrolMidRef.current.getBoundingClientRect().left;
      
      if (scrolTipLeft > scrolMidLeft - 5) {
        mainTopRef.current.style.width = `${transform - 5}px`;
        scrolTipRef.current.style.left = `${transform - 30}px`;
      }
    }
  }

  return (
    <div className="container" ref={containerRef}>
      <div className="container-mid" ref={containerMidRef}>...</div>
      <div className="scrolMid" ref={scrolMidRef}>......</div>
      <div className="maintip">
        <div className="scrolTip" ref={scrolTipRef}>......</div>
      </div>
      <div className="mainTop" ref={mainTopRef}>...</div>
    </div>
  );
}

export default YourComponent;

排查建议 #

• 看控制台报错：打开浏览器开发者工具Console面板，检查是否有未定义变量、null引用等错误，这类错误会直接中断函数执行。
• 检查ref挂载状态：使用ref.current前必须判断是否为null，避免组件未挂载时调用DOM方法报错。
• 验证事件绑定范围：如果需要和原生行为一致（鼠标在页面任意位置移动都触发），必须用useEffect给document.body绑定事件，而不是仅绑定到容器的onMouseMove。
• 调试变量值：在关键位置加console.log，比如打印active、containerRef.current、transform等，确认逻辑是否走到目标代码块。

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