Question

我目前正在尝试为一个学校项目学习React.js，并且在切换图像和活动链接时遇到了麻烦（我在高低搜索了无用的教程）。
我的网站是看起来与旧时的《 Kingdom Hearts 1》菜单主题相似；导航栏如下图所示。

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

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>
);
  }
}

Answer 1

首先，将css（图像）移到单独的css文件中。上一堂课，把你的CSS放进去。像这样

<NavLink tag={Link} d="navResume" className="text-dark inactive resumeImage" to="/resume">
    Resume
</NavLink>;

您的CSS文件中

.resumeImage {
    //declare your image styles here
}

对所有导航链接重复以上操作。

现在将那些只想应用于活动链接的样式保留在单独的类中，然后将该类应用于所有如下所示的Navlinks

<NavLink
    tag={Link}
    d="navResume"
    className="text-dark inactive resumeImage"
    activeClassName="activestyleclass"
    to="/resume"
>
    Resume
</NavLink>;

Answer 2

您可以检查当前URL并根据url更改图像，因为活动类也应取决于url。您可以使用react hook useLocation来获取当前URL。

import { useLocation } from 'react-router-dom';

const Component= () => {
  const [pathname, setPathname] = useState('/');
  const location = useLocation();

  useEffect(() => {
    setPathname(location.pathname);
  }, [location]);

  return (
    <nav className="navbar">
      <NavLink to="/" className="navbar-item">
        {pathname === '/' ? (
          <img src="/images/navbar/home_active.png" alt="Home" />
        ) : (
          <img src="/images/navbar/home.png" alt="Home" />
        )}
      </NavLink>
.....

使用React.js切换活动链接的图像

2 个答案: