时间戳

首页 > 解决方案 > 在 Navlink 上激活时渲染不同的组件

reactjs - 在 Navlink 上激活时渲染不同的组件

问题描述

我正在使用react-router'sNavLink组件来显示侧边栏菜单，并且在里面NavLink我有一个图标。我想更改图标，以便在链接处于活动状态时填充图标。代码是这样的：

<NavLink
  to={route}
  exact
  activeClassName="selected"
>
  <Icon>{icon}</Icon>
</NavLink>

有没有办法在一个组件内渲染不同的NavLink组件？

标签： reactjsreact-router

解决方案

您可以在渲染函数中执行以下操作：

class YourComponent extends React.Component {
  render() {
    var isActive = this.context.router.route.location.pathname === this.props.to;

    return(
        <NavLink
          to={route}
          exact
          activeClassName="selected"
        >
         <Icon>{isActive && icon || otherIcon}</Icon>
        </NavLink>
    );
  }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

这样，您实际上是在检查您正在渲染的路线是否是活动路线，以防万一选择正确的图标

推荐阅读