Question

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

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

export const StyledLink = Anchor.withComponent(Link);

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

警告：收到true的非布尔属性unstyled。

如果要将其写入DOM，请改为传递一个字符串：   unstyled =“ true”或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），它返回一个样式化的（或基于道具不样式化的）组件。

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。 我正在使用样式组件和语义UI反应：

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

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

<TableHeaderCell hasBorderLeft={hasBorderLeft} />

样式化的组件：如何防止将道具向下发送到链接组件？

4 个答案: