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

Posted 2023-05-08

【中文标题】将 gsap ScrollTrigger 与 React useRef() 和 Typescript 一起使用 - 类型不匹配

【英文标题】：Use gsap ScrollTrigger with React useRef() and Typescript - types not matching

【发布时间】：2021-03-01 15:02:36

【问题描述】：

所以我有一个简单的 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的资源很少。

有什么想法可以解决吗？

【参考方案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!)

【讨论】：

最好在创建补间之前检查它是否不为空，以避免创建它的工作。