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

<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 3

作为实现目标的另一种方法，只需使用contains元素定位它，并在激活时覆盖样式。在这种情况下，您可以向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 4

像这样写：

<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 5

尝试创建一个名为.nav-link的类，然后在其中放置原始（也称为非活动链接）样式。

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

5 个答案: