Избегайте передачи реквизита с использованием Styled Components и Typescript - PullRequest
Новая
       40

Избегайте передачи реквизита с использованием Styled Components и Typescript

0 голосов
/ 06 ноября 2019

У меня есть следующий стилизованный компонент в приложении React, которое работает должным образом: 

const BaseButton = styled(Button)<{ borderColor: string }>`
  border-color: ${({ borderColor }): string => borderColor};
`;

Однако в консоли генерируется это предупреждение:

React не распознаетborderColor опора для элемента DOM. Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами bordercolor. Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Чтобы избежать этого, я попытался реализовать решение, предложенное в документации

Пример документации: 

import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'

const Title =
  styled <
  { isActive: boolean } >
  (({ isActive, ...rest }) => <Header {...rest} />)`
  color: ${props => (
  props.isActive ? props.theme.primaryColor : props.theme.secondaryColor
)}
`

Мой оригинальный код переписан по примеру: 

const BaseButton = styled <
{ borderColor: string } >
(({ borderColor, ...rest }) => <Button {...rest} />)`
  border-color: ${({ borderColor }): string => borderColor};
`;

Но я получаю следующее сообщение об ошибке:

Ошибка синтаксического анализа: '>' ожидается

Ошибка относится к <Button {rest...} />

Это моя конфигурация .babelrc на случай, если что-то не так: 

{
  "presets": ["@babel/env", "@babel/typescript", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/transform-runtime",
    "@babel/plugin-transform-modules-commonjs"
  ]
}

1 Ответ

1 голос
/ 06 ноября 2019

Ваш существующий код был уже верен, но реакция дает вам два варианта:

1) использовать строчные буквы, чем случай со змеями

2) удалить атрибут из DOM (вы выбрали этот подход))

Из кода я вижу, что вам нужна опора borderColor, но в пользовательском стиле вы разделили опоры

({borderColor,... rest}) => <Button {...rest} />

Вы удалилиГраница Цвет проп, но вы пытаетесь получить доступ к стилизованным реквизитам следующей строки.

Вместо этого попробуйте переименовать реквизит в bordercolor, если вы хотите, чтобы предупреждение исчезло или просто проигнорировали предупреждение.

...