使用 useRef 修改样式时出现打字稿错误答案

【问题标题】：Typescript error while modifying style with useRef使用 useRef 修改样式时出现打字稿错误
【发布时间】：2021-11-14 06:23:27
【问题描述】：

以下是我的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;

这是错误

我该如何解决这个问题？

【问题讨论】：

这解决了我的问题。谢谢你。如果可能，请将此作为答案发布。

标签： reactjs react-typescript tsx use-ref

【解决方案1】：

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

const x = base as HTMLCollectionOf<HTMLElement>

【讨论】：

【解决方案2】：

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

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

【讨论】：