javascript - 将滚动事件监听器添加到 GatsbyJS (ReactJS) 中的文档

Question

我应该如何将以下事件监听器添加到 GatsbyJS (ReactJS) 功能组件中？

事件监听器

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 (
        <>...</>
    )
}

Answer 1

我需要 useEffect Hook 来执行该操作。 Using the Effect Hook

更新组件

import React, { useEffect } from 'react'

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