时间戳

首页 > 解决方案 > 使用样式组件设置 react-router-dom 链接在传递道具时收到警告

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

问题描述

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：样式正在按预期应用。

标签： reactjsreact-router-domstyled-components

解决方案

使用瞬态道具

在 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>
  );
}

推荐阅读