reactjs - 在 Navlink 上处于事件状态时渲染不同的组件

Question

我正在使用 react-router 的 NavLink 组件来显示侧边栏菜单，并且在 NavLink 内部有一个图标。我想更改图标，以便当链接处于事件状态时图标被填充。代码是这样的:

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

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

Answer 1

您可以在渲染函数中执行类似的操作:

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
};

通过这种方式，您实际上可以检查正在渲染的路线是否处于事件状态，并在万一选择正确的图标