Ошибка «получены` true` для не-логического атрибута »иногда возникает только с styled-компонентами

Question

Моя консоль изобилует случайными случаями вышеуказанной ошибки, но поведение ошибки кажется непредсказуемым.Насколько я понимаю, я получаю эту ошибку, потому что я передал булеву опору (например, "small", "green", "primary" или что-то подобное) в styled-components, которая передает его непосредственно элементу DOM.Однако, если вы посмотрите в документации собственной разработки styled-components (в разделе Адаптация на основе реквизитов), вы увидите, что точный сценарий, о котором я говорю, выглядит стандартным поведением.Я должен быть в состоянии сказать, а затем сделать что-то, основываясь на этом реквизите, по умолчанию "true".

И иногда мое приложение, похоже, не имеет проблем с этим, в то время как в других сценариях оно помечает его.Этот пример является прекрасной иллюстрацией.

Из NumericInput.js

<DropdownArrowIcon small rotate />

Оба реквизита подразумеваются как логические реквизиты, верно?Теперь наблюдайте, как я делаю одно и то же с каждым из них:

DropdownArrowIcon.js

const DropdownArrowIcon = ({small, rotate, ...props}) => (
  <Icon  xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24"
    small={small}
    rotate={rotate}
  >
    <path d="M2 8l10 10 10-10z" />
  </Icon>
);

const Icon = styled.svg`
  width: ${props => props.small ? '13px' : '20px'};
  height: ${props => props.small ? '13px' : '20px'};
  text-align: center;
  vertical-align: middle;

  transform: ${props => props.rotate ? 'rotate(180deg)' : 'inherit'};

`

И все же в моей консоли я получаю только одну ошибку:

Предупреждение: получено true для небулева атрибута rotate.

Если вы хотите записать его в DOM, вместо этого передайте строку: rotate = "true" или rotate = {value.toString ()}.

Мои два основных вопроса здесь:

1. Что приводит к тому, что компоненты React или styleled-компонента выдают ошибку «rotate», но не «small»?
2. Почему любой экземпляр этого шаблона передачи реквизитов может выдавать ошибку, если он входит в официальную документацию по стилевым компонентам?

РЕДАКТИРОВАТЬ: Дополнительный пример:

<Button pink
  buttonText="Save Changes"
  buttonSize="small"
 />

Button.js

<SmallButton
          variant="contained"
          size="small"
          onClick={handleClick}
          pink={pink}
          {...props}
        >
          {buttonText}
        </SmallButton>

Answer 1

Что является причиной того, что React или стилевые компоненты выдают ошибку «rotate», но не «small»?

rotate является допустимым атрибутомна svg элементах.styled-components проходит через эту подпорку, и React проверяет эти атрибуты.

Из документов styled-component:

Если цель в стиле является простым элементом (например, styled.div), styled-components проходит через любой известный атрибут HTML в DOM.Если это пользовательский компонент React (например, styled (MyComponent)), то styleled-компоненты проходят через все реквизиты.

Это объясняет, почему rotate передается (и проверяется), а small - нет.

Если вы не хотите, чтобы он был передан, попробуйте переименовать его в атрибут, который не является атрибутом DOM, например: iconRotate.