在不活动的ReactJS时添加要链接的类

Question

我正在使用React创建一个导航列表，在活动时将activeClassName类添加到链接中，但是我无法弄清楚如何将“非活动”类添加到导航中不活动的链接？在此先感谢您的帮助。

<ul className={styles.desktopLinks}>
  {this.products.map((value, key) => {
    return (
      <li key={key}>
        <Link to={value.to} activeClassName="__link-active">
          <FormattedMessage {...value.msg} />
        </Link>
      </li>
    );
  })}
</ul>

Answer 1

您可以尝试使用className属性将类添加到链接，并在activeClassName中覆盖它的样式。

Answer 2

作为实现所需内容的另一种方法，只需使用包含元素对其进行定位，并在激活时覆盖样式。在这种情况下，你可以在li中添加一个类（你可以在className本身上使用Link，但它不是重点）。

<li key={key} className="your-class">
  <Link to={value.to} activeClassName="__link-active">
    <FormattedMessage {...value.msg} />
  </Link>
</li>

.your-class a {
  // inactive styles here
}

.your-class a.__link-active {
  // override them here
}

Answer 3

写这样：

<ul className={styles.desktopLinks}>
  {this.products.map((value, key) => {
    let isActive = this.props.location.pathname.indexOf(value.to) > -1 ? true : false;
    return (
      <li key={key}>
        <Link to={value.to} activeClassName={isActive ? "__link-active" : "">
          <FormattedMessage {...value.msg} />
        </Link>
      </li>
    );
  })}
</ul>

或者代替this.props.location.pathname你也可以使用window.location.hash。

Answer 4

<ul className={styles.desktopLinks}>
{this.products.map((value, key) => {
         let active = this.props.location.pathname.indexOf(value.to) > -1 ? true : false;
            return (
              <li key={key}>
                <Link to={value.to} activeClassName={active ? '__link-active' : '__link-inactive'}>
                  <FormattedMessage {...value.msg} />
                </Link>
              </li>
            );
          })}
        </ul>

Answer 5

尝试创建一个名为.nav-link的类，并将原始（a.k.a。非活动链接）样式放在那里。