javascript - React TypeScript Web Animations API-对象可能为“空”

我想单击一个按钮并使用Web动画库对元素进行动画处理，出于某种原因，我不能使用document.getElementById进行定位，而不会出现错误。

错误出现在document.getElementById上，并且是Object is possibly 'null'.ts(2531)

import React, {useContext} from "react";

const Home: React.FC = () => {

  function startAnimation() {
    var player = document.getElementById('home').animate([
      { transform: 'scale(1)', opacity: 1, offset: 0 },
      { transform: 'scale(.5)', opacity: .5, offset: .3 },
      { transform: 'scale(.667)', opacity: .667, offset: .7875 },
      { transform: 'scale(.6)', opacity: .6, offset: 1 }
    ], {
      duration: 700,
      easing: 'ease-in-out',
      delay: 10,
      iterations: Infinity,
      direction: 'alternate',
      fill: 'forwards',
    });
  }

  return (

  <nav onClick={startAnimation}>
     Click Me
  </nav>

  <main id="home">
    Animate me
  </main>

  );
}

export default Home;

最佳答案

TypeScript允许type guards。如果您检查该值是否不为null，则不会发生该错误。

function startAnimation() {
  var player = document.getElementById("home");

  if (player !== null) {
    // This side of the if-statement will never execute if player is null

    player.animate(
      [
        { transform: "scale(1)", opacity: 1, offset: 0 },
        { transform: "scale(.5)", opacity: 0.5, offset: 0.3 },
        { transform: "scale(.667)", opacity: 0.667, offset: 0.7875 },
        { transform: "scale(.6)", opacity: 0.6, offset: 1 }
      ],
      {
        duration: 700,
        easing: "ease-in-out",
        delay: 10,
        iterations: Infinity,
        direction: "alternate",
        fill: "forwards"
      }
    );
  }
}