在反应中使用样式组件时如何在子组件中获取父道具

Question

让我用一个例子来说明

//NavLink: react router component

const StyledNavLink = styled(NavLink)`
  color: red;
  background: blue;
`
function styledLink(label, to) {
  return <StyledNavLink
    to={to}
    className={(props) => console.log(props)}
  >
    {label}
  </StyledNavLink>
}

此处未打印任何内容... 如果我使用 NavLink 而不是 StyledNavLink，我会在控制台中获取所有的道具值。那么如何获取StyledNavLink组件中的NavLink属性呢？

Answer 1

我认为您没有将 props 从父级传递到您的样式化组件中。应该有点像这样-

const StyledNavLink = styled(NavLink)`
  color: red;
  background: blue;
`;

const Menu = (props) => {
  const { label, to } = props;
  return <StyledNavLink to={to}>{label}</StyledNavLink>;
};

Answer 2

问题

NavLink 组件的 className 属性与 styled-components 使用的 className 属性冲突。 styled(NavLink) 组件只会有一个字符串化的 className 属性，而 NavLink 组件可以采用字符串或函数 className 值。

解决方案

在不同的 prop 下传递 NavLink className prop 并处理样式化组件中的条件逻辑。

示例：

const StyledNavLink = styled(({ className, navLinkClassName, ...props }) => (
  <NavLink
    {...props}
    className={(props) => {
      let extraClass =
        typeof navLinkClassName === "function"
          ? navLinkClassName(props)
          : navLinkClassName;
      return [className, extraClass].filter(Boolean).join(" ");
    }}
  />
))`
  color: red;
  background: blue;

  &.activeLink {
    color: green;
    background: lightgreen;
  }
`;

用法：

function styledLink(label, to) {
  return (
    <StyledNavLink
      to={to}
      navLinkClassName={(props) => {
        console.log("styledLink", props);
        return props.isActive ? "activeLink" : null;
      }}
    >
      {label}
    </StyledNavLink>
  );
}

...

{styledLink("home", "/")}

如果你想让 styledLink 实际上成为一个 React 组件：

function StyledLink({ label, to }) {
  return (
    <StyledNavLink
      to={to}
      navLinkClassName={(props) => {
        console.log("StyledLink", props);
        return props.isActive ? "activeLink" : null;
      }}
    >
      {label}
    </StyledNavLink>
  );
}

...

<StyledLink to="/" label="home" />

在反应中使用样式组件时如何在子组件中获取父道具

How to get parent props in child component when using styled component in react

javascript

reactjs

react-router

styled-components

问题

解决方案