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无法识别DOM元素上的tempLeftProp道具。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写templeftprop。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

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

问题

为什么会出现此错误？忽略它是否安全？

PS：样式已按预期应用。

Answer 1

UPDATE 2020-04-07：使用瞬态道具

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

临时道具是一种传递道具的新模式，道具仅由样式化组件显式使用，而无意传递给更深的组件层。使用方法如下：

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 Link标记上使用“ to”道具，它可以将两个不同的值作为字符串或对象。

如果是字符串，则表示链接到的绝对路径，例如/users/123（不支持相对路径）。
如果是对象，则可以具有四个键：
- 路径名：代表链接路径的字符串。
- 查询：要key:value对的对象进行字符串化。
- 哈希：网址中的哈希，例如#a-hash。
- 状态：坚持到该位置的状态。

您的上述代码可以表示为：

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

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

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

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

Answer 3

内部，React Router的Link将其所有道具传递给<a> DOM元素。 Link使用的变量除外，例如to。之所以可以使用样式，是因为这些道具是由样式化组件解释的，但是同一道具又被传递给内部<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>
  );
}

使用样式化组件对react-router-dom链接进行样式设置，在传递道具时会发出警告

3 个答案:

UPDATE 2020-04-07：使用瞬态道具

新答案应为：