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

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