在样式化组件中使用来自 React Router 的“活动”状态答案

【问题标题】：Use 'active' state from React Router in Styled Components在样式化组件中使用来自 React Router 的“活动”状态
【发布时间】：2018-10-16 21:52:48
【问题描述】：

当你在它们链接的页面上时，React Router 会向 NavLinks 添加一个 active 类。如何使用样式化组件访问此属性。当您在他们的页面上时，我需要以不同的方式设置菜单项的样式。

const LinkElem = styled(NavLink)`
  font-size: 16px;
  font-weight: 400;

  ${props => console.log(props)};

  &:hover {
    color: ${props => props.theme.colorOrange};
  }
`;

const Menu = props => {
  const { me } = props;
  return (
    <MenuElem>
      <li>
        {me ? (
          <LinkElem to="/account">Account</LinkElem>
        ) : (
          <LinkElem to="/login">Log in / sign up</LinkElem>
        )}
      </li>
    </MenuElem>
  );
};

【问题讨论】：

标签： react-router styled-components

【解决方案1】：

道具 className 被添加到 NavLink 的子级中，因此在 NavLink 级别无法访问。 docs 对此并不清楚。因此，我们无法检查 props.className === 'active' 并添加样式。

相反，您可以只使用样式组件内部的 css 供您使用：

  const LinkElem = styled(NavLink)`
  // example style
  &.active {
    color: ${props => props.theme.orange }
  }
`;

【讨论】：

我知道 NavLink，但我使用的是样式化组件：github.com/styled-components/styled-components
@Evans 好的.. 我想我误解了你的问题.. 我已经编辑了我的答案.. 看看这是否是你要找的
我没有那个道具。你自己有这个工作还是你认为它会通过？谢谢
@Evans 我参考了文档，它说“默认给定的类是活动的。这将与 className 属性结合在一起。”。但经过调查，我发现 className prop 没有传递给这个 NavLink 组件，而是传递给它的子组件（、）。因此，这就是您无法访问它的原因。
迄今为止最简单的解决方案

【解决方案2】：

const StyledLink = styled(NavLink)`
  color: blue;

  &.active {
    color: red;
  }
`;

【讨论】：

【解决方案3】：

如果您尝试构建独立于路由器的样式化组件，我并不是特别热衷于 &.active 方法，因此我创建了 asNavLink 来处理这个问题：

npm install as-nav-link --save

给定一个组件：

const MyNavAnchor = styled(({
  as: T = 'a',
  active, // destructured so it is not passed to anchor in props
  ...props
}) => <T {...props} />)({
  textDecoration: 'blink',
  color: 'blue',
}, ({ active }) => (active && {
  color: 'red',
}));

你可以这样使用它：

 import asNavLink from 'as-nav-link';

 const MyNavLink = asNavLink(config)(MyNavAnchor);

它会将活动道具传递给您的样式组件。

config 是可选的，可以包含一个 isActive 函数（根据 ReactRouter 的 NavLink）和一个 activeProp 字符串（传递给您的组件的道具名称）。

【讨论】：

【解决方案4】：

从react-router v4 开始，您可以使用activeClassName 和样式化组件的attrs() 函数来设置NavLink 的活动状态的样式，而无需任何依赖：

export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`

  &.${activeClassName} {
    background: red;
  }
`;

相关文档：

【讨论】：

【解决方案5】：

我认为这是最简单的决定。

const StyledLink = styled(NavLink)`
  color: blue;

  &.${props => props.activeClassName} {
    color: red;
  }
`;

【讨论】：

【解决方案6】：

如果你在 styled-components 中使用对象语法，你可以实现下一个解决方案：

const activeClassName = 'nav-item-active'

export const StyledLink = styled(NavLink).attrs({
    activeClassName,
})(props => ({
    height: '20px',
    width: '20px',
    backgroundColor: 'green',
    ['&.' + props.activeClassName]: {
        backgroundColor: 'red'
    }
}))

用 react 路由器的活动类的名称声明变量
为 NavLink 设置样式并作为属性 activeClassName 传递
从 props 中获取 activeClassName
在出现 activeClassName 的情况下声明条件样式

您可以在下一个 StackBlitz 项目中查看实时示例：

https://stackblitz.com/edit/react-hcudxz

【讨论】：

【解决方案7】：

样式化组件：

import { NavLink } from 'react-router-dom';

export const MyNavLink = styled(NavLink)`
  &.${props => props.activeClassName} {
    color: red;
  }
`;

用法：

<MyNavLink to="/dashboard" activeClassName="anyClassNameWillWork">Dashboard</MyNavLink>

测试：

react-router-dom 5.1.2
styled-components 5.0.1

【讨论】：

【解决方案8】：

react-router 现在有 activeStyle 属性，可以用来轻松地设置活动链接的样式：

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

使用样式组件：

const LinkElem = styled(NavLink)`
  font-size: 16px;
  font-weight: 400;
`;

<LinkElem
  activeStyle={{
    fontWeight: 'bold',
    color: 'red',
  }}
></LinkElem>;

【讨论】：

【解决方案9】：

您添加到 NavLink 的activeClassName 的字符串稍后会在您到达特定路线时加入到className。由于样式化组件支持纯 css，

&.{yourActiveClassName} { #css goes here}

应该可以。

【讨论】：