使用 useRef 修改样式时出现 Typescript 错误

Question

以下是我的tsx文件。以下代码在普通 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;

这是错误

我该如何解决这个问题？

Answer 1

如果您尝试使用打字稿从某些元素设置样式，打字稿无法知道 DOM 是否真的存在。您应该先测试元素是否未定义。

if(base[0] !== undefined ) { base[0].style.backgroundPositionY = offset * 0.2 + "px"; }

Answer 2

我认为您需要将其转换为 HTMLElement。

const x = base as HTMLCollectionOf<HTMLElement>

使用 useRef 修改样式时出现 Typescript 错误

Typescript error while modifying style with useRef

reactjs

tsx

react-typescript

use-ref