javascript - React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

Question

我有以下 svg 组件，我在其中传递 Prop 。

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

然后我有一个看起来像这样的 styled-component。

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

我看到以下 react 错误。

Warning: React does not recognize the isActive prop on a DOM element.

Answer 1

我在 styled-components 上遇到了同样的问题，最后我做了这样的事情:

<Icon isactive={isActive.toString()} />

${props =>
  props.isactive === 'true' &&
  css`
    transform: rotate(-180deg);
  `};
}