在React.js中滚动到某个部分时突出显示菜单项

Question

无法解决那个问题。 我正在创建具有滚动功能的导航栏，即。当按下某个菜单项时，页面将滚动到相应的部分。虽然这看起来非常简单，但是当窗口到达该部分时，我不知道如何以不同的颜色突出显示某个菜单项。 F.ex.用户按下“联系人”，页面滚动到联系部分，联系人菜单项将其颜色更改为红色。谢谢你的帮助！

这是我的代码：

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;