styled-components: Как предотвратить отправку реквизита в компонент Link?

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 prop передается элементу DOM с помощью Link.

Итак, вопрос в том, как предотвратить Link от попыток добавить реквизит к элементу?

Answer 1

Мосе Рагуццини прав.Решение, которое вы, возможно, захотите попробовать, - это создать небольшой пользовательский компонент, использующий стилизованные компоненты, чтобы обернуть вокруг компонента Link, который будет передавать необходимые реквизиты вашему стилевому компоненту, а также компоненту Link

.

Answer 2

Если я правильно понял проблему.Я использую решение, предоставленное на официальной странице документации 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 3

Целью Styled Component является обслуживание прозрачного компонента с оригинальными реквизитами (ref: https://www.styled -components.com / docs / basics # прошло-реквизиты ).Шаблон, который вы ищете, это HoC (ref: https://reactjs.org/docs/higher-order-components.html), который возвращает стилизованный (или не стилизованный, на основе реквизита) компонент.