如何在 React 中突出显示页面滚动上的导航栏链接

Question

我在 Codepen https://codepen.io/dbilanoski/pen/LabpzG?editors=1010中找到了我想要在 React 应用程序中执行的操作的示例。当我向下滚动页面时，它应该突出显示导航栏中的该部分，该部分粘在页面顶部。我的应用程序是一个单一页面，包含大约 5 到 6 个部分，这些部分将成为索引/内联页面，因此当用户向下滚动时，会将他们带到下一个部分。我应该采取什么方法来整合它？更具体地说，我应该只使用 React，还是应该实现 React Router Dom？从最一般的意义上来说，完成此功能的最佳方法是什么？

App 

import React, {Component} from 'react';
import Footer from './components/footer/Footer';
import Hero from './components/hero/Hero';
import Resume from './components/resume/Resume';
import About from './components/about/About';
import Contact from './components/contact/Contact';
import Navbar from './components/navbar/Navbar';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {

    }
  }

  componentWillMount() {
    window.addEventListener('scroll', this.navHighlighter);
  }

  navHighlighter() {}

  render() {
    return (
      <div className="App">
        <Navbar />
        <Hero/>
        <About/>
        <Resume/>
        <Contact/>
        <Footer/>
      </div>
    );
  }
}

Navbar 

mport React, {Component} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons'
import './navbar.css';

class Navbar extends Component {
    constructor() {
        super();
        this.state = {
            addClass: '',
            showMenu: ''
        }
        this.handleScroll = this.handleScroll.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);
    }

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

    handleScroll() {
        if (window.scrollY > 0) {
            this.setState({addClass: 'sticky'})
        } else {
            this.setState({addClass: ''})
        }
    }

    toggleMenu() {
        let { showMenu } = this.state;
        this.setState({showMenu: showMenu === 'open' ? '' : 'open'})
    }

    render() {
        return (
            <div>
                <header onScroll={this.handleScroll} className={this.state.addClass}>
                    <a href="#" className="logo">Jeremy</a>
                    <nav className={this.state.showMenu}>
                        <ul>
                            <li><a href="#" className="active">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#skills">Skills</a></li>
                            <li><a href="#projects">Projects</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                    <div className="menu-toggle" onClick={this.toggleMenu}><FontAwesomeIcon className='icon' icon={faBars} /></div>
                </header>
            </div>
        );
    }
}

export default Navbar;

Answer 1

您可以<NavLink />与activeClassName属性一起使用。

<NavLink to="#about" activeClassName={"active"} className={"anything"}>About</NavLink>