使用React Js滚动时在导航栏上更改颜色

Question

我正在尝试使导航栏在滚动时更改颜色。现在，我在Toolbar.js中拥有所有内容，但是我不知道如何使其正常工作以及它现在不起作用的方式。我该怎么办？

我尝试将“ state”等内容放入App.js和单独的文件中，但没有弄清楚如何使其工作。

import React from "react";

import {BrowserRouter as Router, Route, Link, NavLink} from "react-router-dom";

// import Routes from "../Routes";

import DrawerToggleButton from "../SideDrawer/DrawerToggleButton";
import "./Toolbar.css";

// window.onscroll = () => {
//     const toolbar = document.querySelector('#toolbar__navigation');
//     if(this.scrollY <= 10) toolbar.className = ''; else toolbar.className = 'scrolled';
// };


export default class Div extends React.Component {
    state = {
        color: 'white'
    }

    listenScrollEvent = e => {
        if (window.scrollY > 400) {
            this.setState({color: 'black'})
        } else {
            this.setState({color: 'white'})
        }
    }

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


const toolbar = props => (
    <header className="toolbar" >
        <Router>
            <nav className="toolbar__navigation" id="toolbar__navigation"> 
                <div className="toolbar__toggle-button">
                    <DrawerToggleButton click={props.drawerClickHandler}/>
                </div>
                <div className="toolbar__logo">
                    <a href="/">GJELTENDIGITAL</a>
                </div>
                <div className="spacer" />
                <div className="toolbar_navigation-items">
                    <ul>
                        <li><NavLink to="/">Hjem</NavLink></li>
                        <li><NavLink to="/Service">Tjenester</NavLink></li>
                        <li><NavLink to="/About">Om oss</NavLink></li>
                        <li><a href="/">Kontakt</a></li>
                    </ul>
                </div>
            </nav>
        </Router>
    </header>
);

export default toolbar;

我希望它会从透明变为白色