如何使用useRef Hook进行样式操作？解决读取style的null报错

你写的代码报错核心原因是创建的listRef没有绑定到任何DOM元素上，点击按钮时listRef.current依然是null，自然无法读取style属性。下面是正确的使用方式：

步骤1：给目标DOM元素绑定ref #

找到你想要移动的那个DOM节点（比如代码里的wrapper或者内部的列表容器），将ref={listRef}赋值给它，这样React才会把该DOM元素的引用存入listRef.current。

步骤2：添加空值检查 #

即使绑定了ref，也要考虑组件尚未完成挂载时触发点击的情况，操作DOM前必须先判断listRef.current是否存在。

修正后的代码示例 #

import { useRef } from 'react';
import ArrowBackIosOutlined from '@mui/icons-material/ArrowBackIosOutlined';

export const List: React.FC = () => {
  // 明确类型，不要用any，提升代码健壮性
  const listRef = useRef<HTMLDivElement>(null);
  
  const handleSliderClick = (direction: string) => {
    if (direction === "left") {
      // 先检查current是否存在
      if (listRef.current) {
        listRef.current.style.transform = `translateX(230px)`;
      }
    }
  };

  return (
    <div className="movie-list">
      <span className="list-title">Continue to watch</span>
      {/* 把ref绑定到要移动的wrapper上 */}
      <div className="wrapper" ref={listRef}>
        <ArrowBackIosOutlined
          className="slider-arrow left"
          onClick={() => handleSliderClick("left")}
        />
        {/* 这里应该还有你的列表项内容，比如电影卡片等 */}
      </div>
    </div>
  );
};

关键注意点 #

• ref必须绑定到目标DOM：useRef创建的对象本身只是个空容器，只有当你把它赋值给某个DOM元素的ref属性时，React才会在组件挂载后把该DOM节点的引用存入current属性。
• 空值检查不可少：组件初始化阶段（首次渲染完成前）listRef.current是null，如果此时触发点击就会报错，所以操作前一定要判断是否存在。
• 避免使用any类型：明确指定ref的类型（比如HTMLDivElement），可以获得TypeScript的类型提示，减少潜在错误。

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