Reactjs 将gsap ScrollTrigger与React useRef（）和Typescript一起使用-类型不匹配

所以我有一个简单的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
`

如果没有Typescript，这段代码就可以工作

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

---

有什么办法可以解决吗？

最终比我想象的更容易解决了。因为类型“null”与“string | Element | 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!})

---

在创建tween之前，最好先检查它是否为null，以避免创建tween的工作。

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