React导航栏活动样式状态菜单链接ReactJs

如何在单击特定菜单项以导航到中的组件时进行调整

我使用了类似的示例，但没有做什么更改，因为我使用的是从NextJs导入的链接，但问题是链接本身和活动样式没有连接，我的问题是我将menuItems作为状态，并希望使活动状态具有特定的活动设计突出显示（菜单项--active）当我单击包含链接的框或div时

import React, { Component } from 'react';
import Link from 'next/link';

// import  MenuItem  from './MenuItem';

import '../style.scss';


  class Sidebar extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        activeItem: '',
        activeItemPosition: 0,
        activeItemColor: '',
        menuItems: [
          { text: 'ComponentA' },
          { text: 'ComponentB' },
          { text: 'ComponentC' },
          { text: 'ComponentD' },
          { text: 'ComponentE' }
        ],
      }

      this.handleClick = this.handleClick.bind(this)
    }



    handleClick(activeItem) {
      return e => {
        e.preventDefault()

        this.setState({
          activeItem,
          activeItemPosition: document.getElementById(activeItem).offsetTop,
          activeItemColor: window.getComputedStyle(document.getElementById(activeItem)).getPropertyValue('background-color'),
        })


      }
    }

    render() {
      const menuItems = this.state.menuItems.map(item => <MenuItem item={ item } handleClick={ this.handleClick }/>)

      return (
        <div className='menu-container'>
          <span className='menu-item--active' style={{ top: this.state.activeItemPosition, backgroundColor: this.state.activeItemColor }} />


          <div id="ComponentA" className="menu-item" onClick={ this.handleClick('ComponentA') } >
            <Link  href="/ComponentA" >
                ComponentA
            </Link>
          </div>

          <div id="ComponentB" className="menu-item" onClick={ this.handleClick('ComponentB') }>
            <Link  href="/ComponentB">
               ComponentB
            </Link></div>
          <div id="ComponentC" className="menu-item" onClick={ this.handleClick('ComponentC') } >
            <Link  href="/ComponentC">
                ComponentC
            </Link>
          </div>
          <div id="ComponentD" className="menu-item" onClick={ this.handleClick('ComponentD') }>
            <Link  href="/ComponentD">
                ComponentD
            </Link></div>
          <div id="ComponentE"  className="menu-item" onClick={ this.handleClick('ComponentE') } >
            <Link  href="/ComponentE">
                ComponentE
            </Link>
          </div>




          {/* { menuItems }    */}


                 </div>
      )  
    }
  }

  function MenuItem(props) {
    return (  
              <div>

              </div>


    )
  }

  export default Sidebar;

从“React”导入React，{Component}；
从“下一个/链接”导入链接；
//从“/MenuItem”导入菜单项；
导入“../style.scss”；
类侧栏扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
活动项：“”，
activeItemPosition:0，
activeItemColor:“”，
菜单项：[
{text:'ComponentA'}，
{text:'ComponentB'}，
{text:'ComponentC'}，
{text:'component'}，
{text:'component'}
],
}
this.handleClick=this.handleClick.bind（this）
}
handleClick（活动项）{
返回e=>{
e、 预防默认值（）
这是我的国家({
活动项，
activeItemPosition:document.getElementById（activeItem.offsetTop），
activeItemColor:window.getComputedStyle（document.getElementById（activeItem））.getPropertyValue（'background-color'），
})
}
}
render（）{
const menuItems=this.state.menuItems.map（项=>）
返回(
成分a
成分B
成分C
组成
成分
{/*{menuItems}*/}
)  
}
}
功能菜单项（道具）{
报税表（
)
}
导出默认边栏；

因此，我的问题是，当我单击菜单上的任何项目时，如果我单击文本，它将显示组件，但活动项目仍然不会高亮显示为活动项目，除非我单击没有链接或文本的项目本身

请提供帮助，我希望能够单击任何项目，使其保持高亮显示为活动样式，并显示正确的组件

---

提前感谢。

创建一个代码沙盒，以便更容易帮助您。请检查我的更新问题