无法解决这个问题。我正在创建具有滚动功能的导航栏，即当按下某个菜单项时，页面会滚动到相应的部分。虽然这似乎很简单，但我不知道如何在窗口到达该部分时以不同的颜色突出显示该菜单项。例如，用户按下"联系人"，页面会滚动到联系人部分，联系人菜单项的颜色变为红色。2谢谢您的帮助!
下面是我的代码：

import React, { Component } from 'react';
import Container from './Container.jsx';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: 'rgba(34,34,34,0)',
        };
    }

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

    handleScroll(e) {
        const test = (pageYOffset > 900) ? 
        (this.setState({ backgroundColor: 'black' })) : 
        (this.setState({ backgroundColor: 'rgba(34,34,34,0)' }));
    }

    handleClick(e) {
        e.preventDefault();       
        const elementOffsetTop = document.getElementById(e.target.innerText).offsetTop;
        window.scrollTo(0, elementOffsetTop);
    }

    handleUp(e) {
        e.preventDefault();
        window.scrollTo(0, 0);
    }

    render() {
        const menuItems = [
            { menuItem: 'O nas', link: 'About' },
            { menuItem: 'Księgowość', link: 'Ksiegowosc' },
            { menuItem: 'Kadre i płace', link: 'Kadre' },
            { menuItem: 'Doradztwo', link: 'Doradztwo' },
            { menuItem: 'Nieruchomości', link: 'nieruchomosci' },
            { menuItem: 'Kontakt', link: 'kontakt' }
        ];

        const items = menuItems.map(item => {
            const styles = {
                linkStyle: {
                    textDecoration: 'none',
                    color: '#ffffff',
                    cursor: 'pointer'
                },
                textStyle: {
                    marginLeft: '1rem',
                    textTransform: 'uppercase'
                }
            };

            const { linkStyle, textStyle } = styles;

            return (
                <a onClick={e => this.handleClick(e)} key={item.link} style={linkStyle}>
                    <p style={textStyle}> {item.menuItem} </p>
                </a>
            );
        });

        const styles = {
            containerStyle: {
                height: 70,
                position: 'fixed',
                top: 0,
                width: '100%',
                backgroundColor: this.state.backgroundColor,
                zIndex: 20000,

            },
            headerStyle: {
                height: 70,
            },
            navigationStyle: {
                height: '100%',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                fontSize: '0.9rem'
            },
            navigationItemsStyle: {
                display: 'flex',
            },
            logoStyle: {
                fontSize: '1.3rem',
                cursor: 'pointer'
            }

        };
        const { headerStyle, 
            containerStyle, 
            navigationStyle, 
            navigationItemsStyle, 
            logoStyle
            } = styles;

        return (
            <div id="header" style={containerStyle}>
                <header style={headerStyle} ref='header'> 
                    <Container>
                        <div style={navigationStyle}>   
                            <a onClick={e => this.handleUp(e)} style={logoStyle}>
                                <div>{this.props.text}</div>
                            </a>
                            <div style={navigationItemsStyle}> {items} </div>
                        </div>
                    </Container>
                </header>
            </div>
        );
    }
}

export default Header;