reactjs - react-router-dom > NavLink > 多个activeClassName？

Question

是否可以在 NavLink 组件表单 react-router-dom 中有多个 activeClassName？

我有带有 NavLinks 的导航栏，我需要使用 hasActiveClass === true 向元素添加活动类以呈现特定内容。但是当链接处于活动状态时，我还需要另一个活动类（例如“iconActive”）来切换图标。所以代码是这样的：

const MainNavComponent = () => (
  <nav className="nav">
          {menu.map(
            ({ ...props }, index) =>
                <TileNav key={index} {...props} />
          )}
  </nav>
);

const TileNav = ({ to, hasActiveClass, exact, img, activeImg }) => {
  // this is not working:
   const isActive = element.className.contains('active');
   const imgSrc = isActive ? activeImg : img;

  return (
    <NavLink
      to={to}
      activeClassName={
        hasActiveClass ? 'active' : ''
      }
      className="tile-nav__link"
      exact={exact}
    >
      <div className="tile-nav">
        {isActive ? (
          <img className="tile-nav__img" src={activeImg} alt="Menu icon" />
        ) : (
          <img className="tile-nav__img" src={img} alt="Menu icon" />
        )}
      </div>
    </NavLink>

  )
};

and the data came from there:

const menu = [
  {
    to: '/',
    img: menuAccessIcon,
    activeImg: menuAccesActiveIcon,
    exact: true,
    hasActiveClass: false
  },
  {
    to: urls.someUrl.url,
    img: menuSomeIcon,
    activeImg: menuSomeActiveIcon,
    exact: true,
    hasActiveClass: true,
    hideForQuasiUser: true
  },
  {
    to: urls.someurl.url,
    img: menuSomeIcon,
    activeImg: menuSomeActiveIcon,
    exact: true,
    hasActiveClass: true,
    hideForQuasiUser: true
  },
  {
    to: urls.someUrl.url,
    img: menuIcon,
    activeImg: menuActiveIcon,
    exact: true,
    hasActiveClass: true
  }
];

我还尝试为每个对象添加另一个键： hasActiveIcon: true

进而：

  activeClassName={
    hasActiveClass ? 'active' : '',
    hasActiveIcon && 'activeIcon'
  }

但它仍然无法正常工作，因为我在 DOM 中只有第二个活动类 :( 我该如何修复它？

标签： reactjsreact-router-dom

Answer 1

您可以通过使用来修复这样的问题template strings

activeClassName={`${hasActiveClass ? "active" : ""} ${hasActiveIcon ? "activeIcon" : ""}`}