Question

当我转到其链接页面时，我希望我的侧边栏按钮更改颜色。我的代码更改了颜色，即使我路由到另一个页面，颜色也保持不变。这是我的代码：

lass Sidebar extends Component<{}, {}> {
  style = this.getBtnClassName();
  render() {
    return (
      <aside className="sidebar">
        <nav className="nav">
          <LinkButton to="/timer" label="Timer" cssPrefix={this.getBtnClassName()} styles={['block']} />
          <LinkButton to="/reports" label="Report" cssPrefix={this.getBtnClassName()} styles={['block']} />
        </nav>
      </aside>
    );
  }
  getBtnClassName() {
    if (window.location.href === 'http://localhost:3000/timer') {
      return 'nav_active';
    } else {
      return 'nav__btn';
    }
  }
}

export default Sidebar;

Answer 1

您可以改用className。首先，简单地使您的getBtnClassname仅使用window.location.pathname而不是window.location.href，然后在将其部署到任何网站时也可以使用。

    getBtnClassName() {
    if (window.location.pathname === '/timer') {
      return 'nav_active';
    } else {
      return 'nav__btn';
    }
  }

从那里开始，您真正需要做的就是调用该函数，将返回的this.getBtnClassName值分配为您希望应用的类名。

<button to="/timer" label="Timer" className={this.getBtnClassName()}>{this.getBtnClassName()}</button>

您还可以将正确的类分配给渲染器中的变量，当您的情况下只有2个类时，此变量会更干净。

 const btnClass = window.location.pathname === "/timer" ? "nav_active" : "nav__btn"


<button to="/reports" label="Report" className={btnClass}>{btnClass}</button>

示例： https://stackblitz.com/edit/react-scltse

Answer 2

您可以从react-router-dom使用NavLink 并使用道具activeClassName

ref：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

反应：在活动状态下无法更改按钮颜色

2 个答案: