时间戳

首页 > 解决方案 > 使用 useRef 修改样式时出现打字稿错误

reactjs - 使用 useRef 修改样式时出现打字稿错误

问题描述

以下是我的tsx文件。以下代码在 plain 中运行良好js。我正在尝试将我的项目迁移到打字稿。

import React, { useRef } from "react";

const HomeHeader = (): JSX.Element => {
  const headerRef = useRef<HTMLDivElement>(null);

  const handleScroll = () => {
    if (headerRef.current) {
      try {
        const offset = window.pageYOffset;
        const base = headerRef.current.children;
        base[0].style.backgroundPositionY = offset * 0.2 + "px";
      } catch (e) {
        console.warn("Error");
      }
    }
  };

  window.addEventListener("scroll", handleScroll);

  return (
    <header>
      <div className="header--home" ref={headerRef}>
        <div className="header--home-overlay" />
    </header>
  );
};

export default HomeHeader;

这是错误错误

我怎样才能解决这个问题？

标签： reactjsreact-typescripttsxuse-ref

解决方案

我相信您需要将其类型转换为 HTMLElement。

const x = base as HTMLCollectionOf<HTMLElement>

推荐阅读