样式化的组件 React 路由器 v6答案

【问题标题】：Styled components React router v6样式化的组件 React 路由器 v6
【发布时间】：2022-01-04 05:19:17
【问题描述】：

const StyledNavLink = styled(NavLink)`
  text-decoration: ${(props) => {
    console.log(props.style);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }};
  &:hover {
    text-decoration: underline;
  }
`;

export default function BasicExample() {
  return (
    <Router>
      <Navbar>
        <NavItems>
          <NavItem>
            <NavLink
              to="/"
              end={true}
              style={({ isActive }) => {
                console.log(isActive + "About");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              Home
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              to="/about"
              style={({ isActive }) => {
                console.log(isActive + "About");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              About
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              to="/dashboard"
              style={({ isActive }) => {
                console.log(isActive + "Dashboard");
                return { textDecoration: isActive ? "underline" : "none" };
              }}
            >
              Dashboard
            </NavLink>
          </NavItem>
        </NavItems>
      </Navbar>
      <Routes>
        <Route path="/" caseSensitive={false} element={<Home />}></Route>
        <Route path="/about" caseSensitive={false} element={<About />}></Route>
        <Route path="/dashboard" caseSensitive={false} element={<Dashboard />}></Route>
      </Routes>
    </Router>
  );
}

如何抽象出设置活动链接样式的逻辑来表示 StyledNavLink 样式组件，我尝试使用 StyledNavLink 代替 Navlink，但它不起作用。我不确定我可能会错过什么。如果我在 StyledNavLink 中调出 props.style，那么它始终是未定义的。

【问题讨论】：

标签： reactjs react-router-dom styled-components

【解决方案1】：

const StyledNavLink = styled(NavLink)`
  text-decoration: ${(props) => {
    console.log(props.style);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }};
  &:hover {
    text-decoration: underline;
  }
 &[aria-current] {
    color: red;
  }
`;

我只需要检查 aria-current 属性是否存在，现在如果我用 StyledNavLink 替换 NavLink 一切都按预期工作

或者，如下所示，可以检查活动类的存在

const StyledNavLink = styled(NavLink)`
    text-decoration: ${(props) => {
    console.log(props);
    return props.style ? (isActive) => (isActive ? "underline" : "none") : "none";
  }}; 
  &:hover {
    text-decoration: underline;
  }
 &[class*="active"] {
    color: red;
  }
`;

【讨论】：

【解决方案2】：

我对此不太确定，但我在使用 styled-components 设计 Link 或 NextJS 时遇到了类似的问题。所以也许这也可以在这里工作。

解决方法

您可以创建一个LinkWrapper 样式的组件，该组件使用任何默认组件（如div、span 等）包装链接，这不会对您尝试执行的操作产生任何其他问题，然后设置样式Navlik 实际上将成为 a 标签，因此您可以使用 LinkWrapper 嵌套样式 a 标签 (NavLink)。

const LinkWrapper= styled.div`
  a {
    display: flex;
    justify-content: ${props => props.propToPass ? 'flex-start' : 'center'};
    align-items: center;
  }
`;

function App(props) {
  return(
    <LinkWrapper propToPass={/**/}>
      <Link to={props.link}>
        {props.name}
      </Link>
    </LinkWrapper>
  );
}

试试这个，我认为这可以解决问题

【讨论】：