React引用ScrollTop始终返回0

import React, { Component, useEffect, useState } from 'react';

class ScrollComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollTop: 0
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    this.setState({ scrollTop });
  }

  render() {
    return (
      <div>
        <p>Scroll Top: {this.state.scrollTop}</p>
        {/* 其他组件内容 */}
      </div>
    );
  }
}

function ScrollComponentFunctional() {
  const [scrollTop, setScrollTop] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setScrollTop(scrollTop);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div>
      <p>Scroll Top: {scrollTop}</p>
      {/* 其他组件内容 */}
    </div>
  );
}