使用样式化组件样式化 react-router-dom 链接在传递道具时收到警告

Question

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

我收到错误：

警告： React 无法识别tempLeftPropDOM 元素上的prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写templeftprop。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

我一直将道具传递给我的样式组件。我不知道问题是否在于我正在为组件Link而不是常规 HTML 元素设置样式。

题

为什么我收到这个错误？忽略它是否安全？

PS：正在按预期应用样式。

Answer 1

2020-04-07 更新：使用瞬态道具

在 5.1.0 版本中，您可以使用瞬态道具。这样您就不需要额外的包装器，即减少了不必要的代码：

瞬态 props 是一种新模式，用于传递仅由样式组件显式使用的 props，而不打算向下传递到更深的组件层。以下是您如何使用它们：

const Comp = styled.div`
  color: ${props => props.$fg || 'black'};
`;

render(<Comp $fg="red">I'm red!</Comp>);

注意道具上的美元符号 ($) 前缀；这将其标记为瞬态和样式组件知道不将其添加到呈现的 DOM 元素或将其进一步向下传递到组件层次结构。

新的答案应该是：

样式组件：

LS.NavFixedItem_LINK = styled(Link)`
  display: flex;
  justify-content: ${props => props.$tempLeftProp ? 'flex-start' : 'center'}; // '$' added
  align-items: center;
`;

父组件：

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK 
      to={props.link} 
      $tempLeftProp={props.toLeft} // '$' signals the transient prop
    >
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

Answer 2

在内部，React RouterLink将其所有 props 传递给<a>DOM 元素。除了使用的那些Link，例如to. 因此样式可以工作，因为 props 由 Styled Components 解释，但随后相同的 prop 再次传递到内部<a>，这会触发（无害的）错误消息。

您可以尝试使用具有嵌套样式的包装器，如下所示：

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

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK tempLeftProp={props.toLeft}>
      <Link to={props.link}>
        {props.name}
      </Link>
    </LS.NavFixedItem_LINK>
  );
}