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} />)`&nbsp; ${props =>&nbsp; &nbsp; props.isActive &&&nbsp; &nbsp; css`&nbsp; &nbsp; &nbsp; transform: rotate(-180deg);&nbsp; &nbsp; `};`是不是更简单的解决方案，它也可以防止属性不必要地呈现到 DOM

Answer 2

我在使用样式组件时遇到了同样的问题，最后我做了这样的事情：<Icon isactive={isActive.toString()} />${props =>&nbsp; props.isactive === 'true' &&&nbsp; css`&nbsp; &nbsp; transform: rotate(-180deg);&nbsp; `};}