如何通过 useRef 钩子使用样式？

Question

我正在尝试使用 useRef 通过单击按钮来移动组件的项目。 我尝试了以下代码：

export const List: React.FC = () => {
  const listRef: any = useRef(null);
  const handleSliderClick = (direction: string) => {
    if (direction === "left") {
      console.log(listRef.current, "refff");
      listRef.current.style.transform = `translateX(230px)`;
    }
  };
  return (
    <div className="movie-list">
      <span className="list-title">Continue to watch</span>
      <div className="wrapper">
        <ArrowBackIosOutlined
          className="slider-arrow left"
          onClick={() => handleSliderClick("left")}
        />
      </div>
    </div>
  );
};

我收到错误消息“类型错误：无法读取 null 的属性（读取‘样式’）”。 useRef 的正确使用方法是什么？

Answer 1

需要将 ref 分配给要操作的元素。 例如

  <div className="wrapper" ref={listRef}>

Answer 2

您需要将 ref 分配给元素，然后它才会起作用。

    <div className="wrapper" ref={listRef}>