如何在 React 中正确使用 Ref 操作 DOM 并绑定鼠标移动事件-js教程-PHP中文网

本文详解如何将原生 JavaScript 的 document.addEventListener('mousemove') 迁移至 React，重点解决 Ref 访问错误、事件参数缺失、DOM 元素未正确绑定等问题，并提供可运行的 Hooks 实践范例。

本文详解如何将原生 javascript 的 `document.addeventlistener('mousemove')` 迁移至 react，重点解决 ref 访问错误、事件参数缺失、dom 元素未正确绑定等问题，并提供可运行的 hooks 实践范例。

在 React 中直接操作 DOM（如 document.querySelector 或 document.body.addEventListener）不仅违背其声明式设计哲学，还容易引发生命周期不一致、Ref 未挂载、事件丢失等问题。你遇到的 scrollMove 未触发，根本原因在于三类典型错误：

Ref 访问方式错误：document.containerRef 是无效写法，必须通过 ref.current 获取真实 DOM 节点；
事件处理器缺少参数：onMouseMove={ytu} 未传递事件对象 e，导致 e.pageX 报错；
Ref 未正确关联到 JSX 元素：所有需操作的 DOM 节点（如 .container-mid、.scrolMid）都必须显式绑定 ref={xxxRef}，否则 xxxRef.current 为 null。

✅ 正确实现如下（完整可运行示例）：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

import { useRef, useEffect } from 'react';

const ScrollController = () => {
  const containerRef = useRef<htmldivelement>(null);
  const containerMidRef = useRef<htmldivelement>(null);
  const scrolMidRef = useRef<htmldivelement>(null);
  const scrolTipRef = useRef<htmldivelement>(null);
  const mainTopRef = useRef<htmldivelement>(null);

  // 示例状态：实际中建议用 useState 管理 active
  let active: string = 'container-mid'; // ⚠️ 注意：若 active 为响应式状态，请改用 useState + useEffect

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!active || !containerRef.current) return;

    const x = e.pageX - containerRef.current.getBoundingClientRect().left;
    scrollMove(x);
    console.log('moving:', x);
  };

  const scrollMove = (x: number) => {
    if (!containerRef.current) return;
    const maxWidth = containerRef.current.offsetWidth;
    const transform = Math.max(0, Math.min(x, maxWidth));

    if (active === 'container-mid') {
      // ✅ 安全访问 ref.current，且确保元素存在
      if (containerMidRef.current) {
        containerMidRef.current.style.width = `${transform}px`;
      }
      if (scrolMidRef.current) {
        scrolMidRef.current.style.left = `${transform - 25}px`;
      }
      if (
        scrolTipRef.current &&
        containerMidRef.current &&
        scrolTipRef.current.getBoundingClientRect().left >
          containerMidRef.current.getBoundingClientRect().left - 5
      ) {
        if (mainTopRef.current) {
          mainTopRef.current.style.width = `${transform - 5}px`;
        }
        if (scrolTipRef.current) {
          scrolTipRef.current.style.left = `${transform - 30}px`;
        }
      }
    }
  };

  return (
    <div classname="container" ref="{containerRef}" onmousemove="{handleMouseMove}">
      <div ref="{containerMidRef}" classname="container-mid">
        {/* 内容 */}
      </div>
      <div ref="{scrolMidRef}" classname="scrolMid">
        {/* 滚动条主体 */}
      </div>
      <div classname="maintip" ref="{mainTopRef}">
        <div ref="{scrolTipRef}" classname="scrolMid">
          {/* 提示滑块 */}
        </div>
      </div>
    </div>
  );
};

export default ScrollController;</htmldivelement></htmldivelement></htmldivelement></htmldivelement></htmldivelement>

? 关键注意事项：

Ref 类型标注：使用 useRef(null) 提供类型安全，避免 any 隐式类型；
空值防护：每次读取 ref.current 前务必校验非空（尤其在服务端渲染或初始挂载时）；
性能优化：高频 mousemove 事件建议节流（如 useThrottle 自定义 Hook），避免过度重排重绘；
响应式状态：若 active 是动态状态（如由按钮切换），请改用 const [active, setActive] = useState('container-mid')，并在 useEffect 中监听变化，避免闭包 stale value 问题；
CSS 优先替代 JS 操作：宽度/位置变更尽量通过 className + CSS 变量或 style={{ width }} 实现，更符合 React 数据驱动理念。