styled-components：如何防止道具被发送到 Link 组件？

Question

我正在使用样式化组件来设计我的链接。我有时还需要使用 react-router-dom.

中的 Link 组件

import { Link } from 'react-router-dom';
import { Anchor } from './src';

export const StyledLink = Anchor.withComponent(Link);

但是，上面的代码在控制台中产生以下警告：

Warning: Received true for a non-boolean attribute unstyled.

If you want to write it to the DOM, pass a string instead: unstyled="true" or unstyled={value.toString()}.

unstyled 是传递给 StyledLink 的道具，如下所示：

<StyledLink unstyled />

此警告由 Link 组件生成，是因为 unstyled 属性被 Link 传递给 DOM 元素。

所以，问题是，如何防止Link尝试向元素添加道具？

Answer 1

Styled Component 的目的是提供一个带有原始道具的透明组件（参考：https://www.styled-components.com/docs/basics#passed-props）。您正在寻找的模式是 HoC（参考：https://reactjs.org/docs/higher-order-components.html），returns 一个样式化（或非样式化，基于道具）组件。

Answer 2

Mosè Raguzzini 是对的。您可能想尝试的一种解决方案是创建一个小型自定义组件，该组件使用样式化组件环绕 Link 组件，该组件会将必要的道具传递给您的样式化组件，以及 Link 组件

Answer 3

如果我做对了问题。我使用官方文档页面上提供的解决方案 https://www.styled-components.com/docs/api#typescript

在 styles.ts 文件中

export const StyledLink = styled(({ hoverColor, color, ...rest }) => React.createElement(Link, rest))<{ hoverColor?: string; color?: string; }>...

或在style.tsx

内

export const StyledLink = styled(({ hoverColor, color, ...rest }) => <Link {...rest} />)<{ hoverColor?: string; color?: string; }>...

相同的方法应该适用于 ES6，只需删除类型即可。

Answer 4

我今天遇到了类似的事情，我不得不剥离我传递给样式化组件的自定义道具以生成条件 CSS。 我正在使用 styled-components 和 semantic-ui-react:

const TableHeaderCell = styled(({ hasBorderLeft, ...rest }) => <Table.HeaderCell {...rest} />)`
  border-left: ${hasBorderLeft => (hasBorderLeft ? 'none' : '')};
`;

并且我摆脱了对未知道具的反应警告。像这样使用它：

<TableHeaderCell hasBorderLeft={hasBorderLeft} />

styled-components：如何防止道具被发送到 Link 组件？

styled-components: How to prevent props from being sent down to Link component?

styled-components

react-router-dom