2

我正在为我的应用程序构建导航栏组件，但我遇到了 activeClassName 属性的问题。当我在链接之间更改时，它不会改变任何类或样式。我已经尝试了我在 Internet 上看到的所有内容，但没有任何结果。也许有人可以就这个问题给我一个建议。

我的进口：

import React from 'react';
import { NavLink as RRNavLink } from 'react-router-dom';
import { Nav, NavItem, NavLink } from 'reactstrap';

这是我到目前为止的代码：

    <Nav className="navbar-logged">
      <NavItem>
        <NavLink
          className="nav-link-gdc"
          activeClassName="active"
          to="/home"
          tag={RRNavLink}
        >
            INICIO
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          className="nav-link-gdc"
          activeClassName="active"
          to="/secondLink"
          tag={RRNavLink}
        >
            secondLink
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          className="nav-link-gdc"
          activeClassName="active"
          to="/thirdLink"
          tag={RRNavLink}
        >
            thirdLink
        </NavLink>
      </NavItem>
    </Nav>

谢谢你

4

1 回答 1

2

一个可能的原因是您正在使用 Redux 来管理应用程序的状态

https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux

如果您的视图依赖于全局状态或 React “上下文”，您可能会发现用 connect() 修饰的视图将无法更新。

这是因为 connect() 默认实现了 shouldComponentUpdate，假设你的组件在给定相同的 props 和 state 的情况下会产生相同的结果。这是一个类似于 React 的 PureRenderMixin 的概念。

最快（不是最好）的解决方案是将 pure: false 选项传递给具有 NavLink 的组件的 connect() 函数（在我的情况下是 Header）

function mapStateToProps(state) {
  return { test: state.test}
}

export default connect(mapStateToProps, null, null, {
  pure: false
})(Header)

这将消除 Header 是纯的假设，并使其在其父组件呈现时更新。请注意，这会降低您的应用程序的性能，因此只有在没有其他选择的情况下才这样做。

于 2018-04-04T09:26:25.633 回答