如何在ReactJS中使用useRef选择DOM元素并转换原生JS代码

步骤1：导入useRef钩子 #

首先从React中导入useRef和useEffect（用于确保DOM挂载后再操作）：

import { useRef, useEffect } from 'react';

步骤2：创建Ref对象 #

在函数组件内部，为需要操作的DOM元素创建对应的ref：

const YourComponent = () => {
  // 对应 .scroller-middle 元素
  const scrollerMiddleRef = useRef(null);
  // 对应 .scroller-top 元素
  const scrollerTopRef = useRef(null);
  // 对应原JS代码中的 .middle 元素
  const middleDivRef = useRef(null);

  // 后续逻辑写在这里
}

步骤3：将Ref绑定到JSX元素 #

把创建好的ref通过ref属性绑定到对应的JSX元素上，转换原HTML结构：

return (
  <>
    <div className="top">
      <img src="images/ioootz-3.jpg" draggable={false} />
    </div>

    <div className="scroller scroller-middle" ref={scrollerMiddleRef}>
      <svg
        className="scroller__thumb"
        xmlns="http://www.w3.org/2000/svg"
        width="100"
        height="100"
        viewBox="0 0 100 100"
      >
        <polygon points="0 50 37 68 37 32 0 50" style={{ fill: 'rgb(24,24,62)' }} />
        <polygon points="100 50 64 32 64 68 100 50" style={{ fill: 'rgb(24,24,62)' }} />
      </svg>
    </div>

    <div className="scroller scroller-top" ref={scrollerTopRef}>
      <svg
        className="scroller__thumb"
        xmlns="http://www.w3.org/2000/svg"
        width="100"
        height="100"
        viewBox="0 0 100 100"
      >
        <polygon points="0 50 37 68 37 32 0 50" style={{ fill: 'rgb(24,24,62)' }} />
        <polygon points="100 50 64 32 64 68 100 50" style={{ fill: 'rgb(24,24,62)' }} />
      </svg>
    </div>

    {/* 原JS代码中用到的 .middle 元素，需绑定ref */}
    <div className="middle" ref={middleDivRef}></div>
  </>
);

注意：React中用className替代HTML的class，内联样式需写成对象形式。

步骤4：通过Ref操作DOM #

必须确保DOM挂载完成后再操作ref，通常用useEffect钩子实现：

useEffect(() => {
  // 替换为你实际的transform变量值
  const transform = 100;

  // 先检查ref是否已绑定DOM元素，避免null报错
  if (middleDivRef.current && scrollerMiddleRef.current && scrollerTopRef.current) {
    middleDivRef.current.style.width = `${transform + 5}px`;
    scrollerMiddleRef.current.style.left = `${transform - 20}px`;
    scrollerTopRef.current.style.left = `${transform - 30}px`;
  }
}, [transform]); // 依赖项数组，transform变化时自动重新执行逻辑

关键注意点 #

• ref.current在组件挂载前为null，操作前必须先判断不为空。
• 如果transform是React状态变量，要将其加入useEffect的依赖数组，确保状态更新时DOM样式同步刷新。
• 优先通过React状态+内联样式管理样式，仅在复杂交互场景（如滚动控制）下使用ref直接操作DOM。

内容的提问来源于stack exchange，提问作者Kiki-ko