我目前正试图为一个学校项目学习ReactIdeJs，在结合活动链接切换图像时遇到了麻烦（我已经搜索了高和低的教程，但无济于事）。
我的网站将看起来类似于旧时代 Realm 之心1菜单主题;导航栏如下图所示。

如上图所示，主页被硬编码为“活动”。
我需要的帮助是使每个链接在选中/活动时都显示为“活动”状态。当用户单击其中一个导航链接时，图像应该从灰色变为黑色/橙子。当链接未选中时（或不活动），图像应该从黑色/橙子变回灰色。活动/选中的链接也应该有黑色文本，而不活动的链接有灰色。到目前为止，我所知道的只是如何切换一个类而不是多个类。总的来说，我真的不知道该怎么做。
我如何切换一个导航链接活动，并改变其图像，同时也改变所有其他导航链接到非活动，改变他们的图像以及？任何帮助将不胜感激。我有以下代码为我的导航栏到目前为止：

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
  collapsed: true
};
  }

  toggleNavbar() {
this.setState({
  collapsed: !this.state.collapsed
});
  }

  render() {
return (
  <Navbar
    fixed="bottom"
    className="navbar-expand-sm navbar-toggleable-sm ng-white border-top mb-3"
    light
  >
    <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
    <Collapse
      className="d-sm-inline-flex flex-sm-row-reverse"
      isOpen={!this.state.collapsed}
      navbar
    >
      <ul className="navbar-nav mr-auto">
        <NavItem>
          <NavLink
            tag={Link}
            id="navHome"
            className="text-dark active"
            to="/"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
              hidden
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
            />
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navResume"
            className="text-dark inactive"
            to="/resume"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Resume
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navContact"
            className="text-dark inactive"
            to="/contact"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Contact
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navFetch"
            className="text-dark inactive"
            to="/fetch-data"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Fetch data
          </NavLink>
        </NavItem>
      </ul>
    </Collapse>
    <div>
      {' '}
      <PlaySound child={this.state.child} />{' '}
    </div>
  </Navbar>
);
  }
}