将 gsap ScrollTrigger 与 React useRef() 和 Typescript 一起使用 - 类型不匹配

Question

所以我有一个简单的 React 组件，并想使用 GreenSock ScrollTrigger 插件为其设置动画。不幸的是，在这个项目中我使用 Typescript 并且存在类型不匹配。代码：

import React, {useRef, useEffect}  from "react";
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import styled from "styled-components";

export default function Component() {

    const content = useRef<HTMLDivElement>(null)
    
    useEffect(()=>{
        gsap.registerPlugin(ScrollTrigger)
        gsap.from(content.current, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current})
    },[])

    return (
        <Container ref={content}>
          {..some content}
        </Container>
    )
}
const Container = styled.div`
  //styles here
`

显然，scrollTriger 只接受类型：'string |元素|不明确的' 所以我最终遇到了错误：

Type 'HTMLDivElement | null' is not assignable to type 'string | Element | undefined'.
[1]   Type 'null' is not assignable to type 'string | Element | undefined'.

无需 Typescript，此代码即可工作。

我查了gsap论坛，但什么也没找到，TS上的资源很少。

有什么想法可以解决这个问题吗？

Answer 1

终于解决了这个问题，比我想象的要容易。因为类型“null”与“string |”不兼容元素| undefined'，断言运算符“！”解决了问题。

现在代替：

// bad
gsap.from(content.current, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current})

我有：

// good
gsap.from(content.current!, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current!})

Answer 2

正如扎克上面提到的在此处输入链接描述最好添加一个检查而不是假设 content.current 将被分配。

if (content.current) { gsap.from(content.current, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current}) }