Question

我一直在尝试向用户所在的组件添加活动类。我不确定如何使用activeClassName。

JSX代码：

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav class="navbar sticky-top navbar-expand-lg">
        <Link to="/">
          <a class="navbar-brand" href="#">
            Web_Env
          </a>
        </Link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink to="/login" style={{ textDecoration: 'none' }}>
                <a
                  className="nav-link"
                  href="#"
                  activeClassName="nav-link--active"
                >
                  Login
                </a>
              </NavLink>
            </li>
            <li class="nav-item">
              <NavLink to="/register" style={{ textDecoration: 'none' }}>
                <a className="nav-link" href="">
                  Register
                </a>
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

Css代码：

$color1: #aceca1;
$bgcolor1: #629460;
.navbar {
  background-color: $bgcolor1 !important;
  .navbar-brand {
    color: lighten($color1, 10%);
    font-weight: bold;
    font-size: 2em;
  }
  a.nav-link {
    color: $color1;
    font-size: 1.1em;
    transition: 200ms;
  }
  a.nav-link .active {
    color: white;
    font-size: 1.3em;
  }
  a.nav-link:hover {
    color: white !important;
    transform: scale(1.1);
    text-decoration: none !important;
  }
}

如何根据用户所在的页面来更改锚标记的样式。例如，如果它们在寄存器中，则导航栏中的寄存器将为粗体并具有较大的字体。

Answer 1

这应该做：

<a className="nav-link" href="">
  { window.location.href.search("register") > -1 ? <b> Register </b> : Register }
</a>

使用window.locatiol.herf可获得当前地址，如果它与“ register”匹配，则文本将以粗体显示。

您可以使用相同的逻辑来根据您的位置地址应用不同的样式。

Answer 2

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeClassName="nav-link--active"
    >
      Register
    </NavLink>
  </li>;

您可以删除锚标记。请注意，我从您的示例中保留了nav-link--active类，但是您的样式表当前似乎没有为该类设置规则。还要注意，您在示例中使用的是class关键字。这是一个保留关键字。在任何React组件内部，CSS类都应使用className属性。

或者，您可以执行以下操作：

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeStyle={{ fontWeight: 'bold' }}
    >
      Register
    </NavLink>
  </li>;

Answer 3

我认为最好的方法是使用 dispatch({ type: "FETCH_GAMES", paylaod: { // <=== this popular: popularData.data.results, upcoming: upcomingData.data.results, newGames: newGamesData.data.results, }, }); 类，因为它默认提供了这个 active 属性。

先导入
```
NavLink
```
使用 import { NavLink } from 'react-router-dom'; 获取活动类属性并将其设置为 activeClassName。
```
active
```
通过属性 <NavLink to="/" activeClassName="active"> Home </NavLink> <NavLink to="/store" activeClassName="active"> Store </NavLink> <NavLink to="/about" activeClassName="active"> About Us </NavLink> 在 css 中设置您的类的样式。
```
active
```

如何在React的引导导航栏中添加active？

3 个答案: