Javascript 将Scroll EventListener添加到GatsbyJS（ReactJS）中的文档

我应该如何将以下eventlistener添加到GatsbyJS（ReactJS）功能组件中

EventListener

document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))

功能组件

import React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

export default () => {
    //graphql statement
    return (
        <>...</>
    )
}

import React, { useEffect } from 'react'

export default () => {
    useEffect(() => {
        document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
    })
    return (
        <>...</>
    )
}

从“React”导入React
从“gatsby”导入{Link，useStaticQuery，graphql}
导出默认值（）=>{
//graphql语句
返回(
...
)
}

我需要useEffect钩子来执行操作。

更新的组件

import React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'

export default () => {
    //graphql statement
    return (
        <>...</>
    )
}

import React, { useEffect } from 'react'

export default () => {
    useEffect(() => {
        document.addEventListener('scroll', _ => document.getElementById('logo').style.setProperty('--v-adjust', window.scrollY + 'px'))
    })
    return (
        <>...</>
    )
}

import React，{useffect}来自“React”
导出默认值（）=>{
useffect（（）=>{
document.addEventListener（'scroll'，=>document.getElementById（'logo'）.style.setProperty（'--v-adjust'，window.scrollY+'px'））
})
返回(
...
)
}

到目前为止您尝试了什么？@Nick添加了我的组件大纲。嘿，Ryan，我遇到了同样的问题，我注意到在每次盖茨比导航之后都会添加一个额外的事件侦听器。通常浏览器会删除这些事件侦听器，但由于盖茨比的“软”导航，如果您想进一步使用以获得更好的滚动性能，我们需要手动执行此操作