如何使React导航栏更改滚动上的背景颜色以正常工作？

npm install react react-dom

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

const Navbar = () => {
  const [navbarColor, setNavbarColor] = useState('transparent');

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      const navbarHeight = 64; // 导航栏的高度

      if (currentScrollY > navbarHeight) {
        setNavbarColor('black'); // 滚动超过导航栏高度时，改变背景颜色为黑色
      } else {
        setNavbarColor('transparent'); // 滚动未超过导航栏高度时，背景颜色为透明
      }
    };

    window.addEventListener('scroll', handleScroll);

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

  return (
    <nav style={{ backgroundColor: navbarColor }}>
      {/* 导航栏内容 */}
    </nav>
  );
};

export default Navbar;

import React from 'react';
import Navbar from './Navbar';

const App = () => {
  return (
    <div>
      <Navbar />
      {/* 其他内容 */}
    </div>
  );
};

export default App;