React 无法识别 DOM 元素上的 `isActive` 属性 - 样式组件

Question

我有以下svg组件，我在其中传递道具。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错误。警告：React 无法识别isActiveDOM 元素上的prop。

Answer 1

const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`

  ${props =>

    props.isActive &&

    css`

      transform: rotate(-180deg);

    `};

`

是不是更简单的解决方案，它也可以防止属性不必要地呈现到 DOM

Answer 2

我在使用样式组件时遇到了同样的问题，最后我做了这样的事情：

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

${props =>

  props.isactive === 'true' &&

  css`

    transform: rotate(-180deg);

  `};

}